网页设计中垂直水平居中的几种方法

垂直水平居中的方案有很多，有时候容易搞混。
       其实细分下来主要有两种场景：元素宽高未知的场景、元素宽高已知的场景。针对这两种情况，后文分别列出集中主流的垂直水平居中方案。

元素宽高未知的场景

table 实现垂直水平居中【推荐】

table垂直水平居中方案，是万金油方案，适用性极强，也没有兼容性问题；缺陷是会增加冗余的HTML结构。

<div class="vertical center">     <div class="box-container">         <span class="box">haha</span>     </div></div>.vertical {     width: 100%;     height: 100%;     display: table; } .vertical.center {     text-align: center; } .vertical .box-container {     display: table-cell;     vertical-align: middle; } .vertical .box-container .box {     vertical-align: middle; }

transform 实现垂直水平居中【推荐】

transform垂直水平居中方案，同样也是万金油方案，尤其适合移动端；缺陷是只支持IE9及以上的浏览器。

<span class="box">haha</span> // transform是以自身宽高为基准计算的 .box {     position: relative;      left: 50%;      top: 50%;     transform: translate(-50%, -50%);     }

flexbox 实现垂直水平居中

移动端可以使用；缺陷是只支持IE10及以上的浏览器。

<div class="box-container">     <span class="box"></span></div>// transform是以自身宽高为基准计算的 .box-container {     display: -webkit-flex;     display: -moz-flex;     display: -ms-flex;     display: -o-flex;     display: flex;     justify-content: center;     align-items: center; }

元素宽高已知的场景

绝对定位 实现垂直水平居中

比较常用的方案，需要已知宽高。

<div class="box-container">     <span class="box"></span> </div> .box-container{     position: relative; } .box-container .box {     width: 600px;      height: 400px;     position: absolute;      left: 50%;      top: 50%;     margin-top: -200px;    /* 高度的一半 */     margin-left: -300px;    /* 宽度的一半 */}

margin:auto 实现垂直水平居中

特别适合自身有宽高的元素，比如图片等；但是对于其他元素，仍然需要显式设置宽高。

// 图片等自身带宽高的元素，直接 margin: auto; 即可<div class="box-container">     <img class="box" /> </div> .box-container{     position: relative; } .img {     position: absolute;      left: 0;      top: 0;      right: 0;      bottom: 0;     margin: auto; }// 其他场景需要显式设置宽高<div class="box-container">     <span class="box"></span> </div> .box-container{     position: relative; } .box {     width: 100px;     height: 100px;     position: absolute;      left: 0;      top: 0;      right: 0;      bottom: 0;     margin: auto; }