CSS垂直水平居中

小小的总结一下：行内元素水平居中用text-align: center;块级元素水平居中用margin-left: auto; margin-right: auto;

首先讨论一下单行时的情况。

毫无疑问，这是最简单的一种情况。

HTML结构如下：

1 <div class="demo">2   <span>111111111111111111111111111111111111</span>3 </div>

高度不固定（这种方法同样适用于多行文时的情况，下面就不再讨论）

1 .demo {2   text-align: center; 3   padding-top: 20px;4   padding-bottom: 20px;5 }

高度固定

1 .demo {2   text-align: center;3   height: 100px;4   line-height: 100px;5 }

接下来，讨论下多行时的情况。

HTML结构如下：

1 <div class="demo">2   <span>111111111111111111111111111111111111<br />22222222222222222222</span>3 </div>

高度不固定时只需要添加pading值就可以，不多加讨论了。

高度固定时

方法一：父元素设置display: table，子元素设置display:table-cell。利用了表格的特性。

 1 .demo { 2   height: 100px; 3   display: table; 4   margin-left: auto; 5   margin-right: auto; 6 } 7 .demo span { 8   display: table-cell; 9   vertical-align: middle;10 }

方法二：父元素设置position: relative，子元素设置position: absolute。主要是利用了translate的中心是相对于元素本身的特点。

 1 .demo { 2  position: relative; 3  height: 100px; 4 } 5  6 .demo span { 7  position: absolute; 8  left: 50%; 9  top: 50%;10  -webkit-transform: translate(-50%, -50%);11    -ms-transform: translate(-50%, -50%);12      transform: translate(-50%, -50%);13 }

方法三：利用flex布局。

.demo { height: 100px; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content: center;   -ms-flex-pack: center;     justify-content: center; -webkit-box-align: center; -webkit-align-items: center;   -ms-flex-align: center;     align-items: center;}

方法四：利用:after,:before伪类，结合inline-block的特性实现垂直居中。

 1 .demo { 2  height: 100px; 3  text-align: center; 4 } 5  6 .demo:after, .demo:before { 7  display: inline-block; 8  vertical-align: middle; 9  width: 0;10  height: 100%;11  visibility: hidden;12  content: '';13 }14 15 .demo span {16  display: inline-block;17  vertical-align: middle;18 }

暂时就想到这些了。

原标题：CSS垂直水平居中

关键词：CSS