CSS 实现垂直居中的 5 种方法

《CSS 实现垂直居中的 5 种方法》利用 CSS 来实现对象的垂直居中有许多不同的方法,比较难的是选择那个正确的方法。我下面说明一下我看到的好的方法和怎么来创建一个好的居中网站。 (by 前端观察)

29 thoughts on “CSS 实现垂直居中的 5 种方法

  1. 垂直居中据我所知目前有六种技术,负margin、transform、table-cell、inline-block、flex-box、absolute center。全兼容(非IE&IE6+)的只有inline-block和负margin技术。table-cell和absolute center兼容IE8+,transform兼容IE9+,flex-box兼容IE10+。其中只有负margin不支持响应式布局。

  2. 测试了一下,作者推荐第三种方法:#floater{float:left; height:50%; margin-bottom:-120px;} 只设定了高度而没有设定宽度容易导致div失效。最好设置一个宽度。因此这段代码应当改为:floater{float:left; height:50%; width:100%;margin-bottom:-120px;}。这思路换做伪元素::before会更为巧妙。

  3. 方法六:在元素前放一个相同的兄弟元素,width 0 height 100%,然后将元素本身vertical-align值设为middle,无需任何绝对定位绝对高度,简单好用兼容性好。之前做逸租网时研究出来的//@IT程序猿: CSS实现垂直居中的5种方法

发表评论