CSS垂直水平居中

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

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

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

HTML结构如下：

 <div class="demo">

     <span>111111111111111111111111111111111111</span>

 </div>

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

 .demo {

     text-align: center;

     padding-top: 20px;

     padding-bottom: 20px;

 }

高度固定

 .demo {

     text-align: center;

     height: 100px;

     line-height: 100px;

 }

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

HTML结构如下：

 <div class="demo">

     <span>111111111111111111111111111111111111<br />22222222222222222222</span>

 </div>

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

高度固定时

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

 .demo {

     height: 100px;

     display: table;

     margin-left: auto;

     margin-right: auto;

 }

 .demo span {

     display: table-cell;

     vertical-align: middle;

 }

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

 .demo {

   position: relative;

   height: 100px;

 }

 .demo span {

   position: absolute;

   left: 50%;

   top: 50%;

   -webkit-transform: translate(-50%, -50%);

       -ms-transform: translate(-50%, -50%);

           transform: translate(-50%, -50%);

 }

方法三：利用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的特性实现垂直居中。

 .demo {

   height: 100px;

   text-align: center;

 }

 .demo:after, .demo:before {

   display: inline-block;

   vertical-align: middle;

   width:;

   height: 100%;

   visibility: hidden;

   content: '';

 }

 .demo span {

   display: inline-block;

   vertical-align: middle;

 }

暂时就想到这些了。

巴特西

CSS垂直水平居中

最新文章

热门文章