用CSS实现层的垂直居中

最新推荐文章于 2022-05-28 11:43:33 发布

寂若an年

最新推荐文章于 2022-05-28 11:43:33 发布

阅读量711

点赞数

分类专栏： CSS HTML 文章标签：前端开发

HTML 同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

CSS

3 篇文章 0 订阅

订阅专栏

在《曾经让人迷糊的WEB兼容问题回顾》一文中曾经提到一种方法，即“通过使用百分比绝对定位,与外补丁负值的方法，负值的大小为其自身宽度高度的一半”达到让层垂直居中的效果。
复制代码

div.innerbox {
    position:absolute;
    top:50%;
    left:50%;
    margin:-100px 0 0 -100px;
    width:200px;
    height:200px;
    border:1px solid red
}

这段CSS实现了层垂直居中于浏览器，如果要让innerBox相对于一个父级层实现垂直居中，只需设置父级层的CSS为：

div.outbox {
    width:400px;
    height:400px;
    border:1px solid #f00;
    position:relative
}

然而“负值的大小为其自身宽度高度的一半”这个原理却制约了其实际应用面。innerBox的margin与width、height之间的制约关系，使得动态变化innerBox的内容引起的高度变化没办法反应到margin上，除非使用JS动态控制，抛开JS不说，这种原理实现的垂直居中只能用于innerBox的高宽属性为固定值的情况。如果要实现innerBox的内容动态变化也能保持垂直居中，则要用下面的

.outBox2 {display: table; height: 400px; width:600px;  #position: relative; overflow: hidden;background:#FFCCCC; border: 1px solid #d00;}
.midBox2 {#position: absolute; #top: 50%;display: table-cell; vertical-align: middle;}
.innBox2 {#position: relative; #top: -50%; width:300px; margin:0 auto}

Html结构如下：

 <div class="outBox2">
     <div class="midBox2">
         <div class="innBox2" style="border:1px solid #c00">
         垂直居中<br>
         匪夷所思的垂直居中<br>
         我的博客我做主的居中
         匪夷所思的垂直居中<br>
         我的博客我做主的居中
     </div>
 </div>