DIV居中垂直使用CSS的最佳方式

来源:luqidong 发布时间:2014-01-23 20:17:07 点击数:

问题:我想垂直居中一个div的CSS。我不想表或Javascript,但只有纯CSS。我发现了一些解决方案,但他们都缺少的Internet Explorer 6的支持。

<body>
    <div>Div to be aligned vertically</div>
</body>

下面是最全面的解决方案,我可以建立垂直和水平居中固定宽度,高度灵活的内容框。测试工作FF, Opera, Chrome, & Safari,浏览器,MSIE6+的版本。

.outer {

    display: table;
    position: absolute;
    height: 100%;
    width: 100%;
}

.middle {
    display: table-cell;
    vertical-align: middle;
}

.inner {
    margin-left: auto;
    margin-right: auto; 
    width: /*whatever width you want*/;
}

为了适应IE 7浏览器和旧的,用一个单独的样式表与这些变化:

.outer {
    display: inline-block;
    top: 0;
}

.middle {
    display: inline-block;
    top: 50%;
    position: relative;
}

.inner {
    display: inline-block;
    top: -50%;
    position: relative;
}

案例demo

78OA办公系统