兼容IE的容器绝对居中方案

发表于 2020-10-28 11:01:11   |   下载附件   |   字体:
绝对居中容器居中水平垂直居中内容垂直居中

CSS:

.container {
    display: table; /*主要代码*/
    *position: relative;  /*for ie67*/
    background-color: #FF5E53; width: 800px; height: 200px; overflow: hidden; margin: 0 auto;
}
.content {
    vertical-align: middle; display: table-cell; text-align: center; /*主要代码*/
    *position: absolute; *top: 50%; *left: 50%; /*for ie67*/
}
.center {
    display: inline-block; /*主要代码*/
    *display: inline; zoom: 1; *position: relative; *top: -50%; *left: -50%; /*for ie67*/
    padding: 10px; border: 1px solid #fff;
}


HTML:

<div class="container">
    <div class="content">
        <div class="center">
            啦啦啦,啦啦啦,我是卖报的小行家....<br>dsdADSsdSD
        </div>
    </div>
</div>