ie8 不支持margin:0 auto,怎么实现居中

2018-04-19  本文已影响15人  _信仰zmh

现代主流浏览器,都支持margin:0 auto;,这样元素就可以实现居中显示。

但是ie8并不支持,这个属性,导致其它浏览器正常,但是ie8得就靠左显示。

怎么兼容ie8 居中

原理: 这其实是inline-block水平居中方案以及table-cell垂直居中方案的合用,也算是把文本排版的特性都利用了个遍了。

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            .parent {
                text-align: center;
                display: table-cell;
                vertical-align: middle;
            }
            
            .child {
                display: inline-block;
            }
        </style>
    </head>

    <body>
        <div class="parent">
            <div class="child">DEMO</div>
        </div>
    </body>

</html>

上一篇下一篇

猜你喜欢

热点阅读