Css实现居中的方法

1.水平居中text-align:center方式

        text-align:center可以水平居中块级元素中的行内元素，如inline，inline-block；

        但是如果用来居中块级元素中的块级元素时，如div中的div，一旦内层的div有自己的宽度，这种方法就会失效。只能让里面div的文字等内容居中，而div仍然是左对齐的。

       缺点：这种方式不能实现垂直居中：

        1.需要给 div 添加 padding 或 给 div 中的元素添加 margin-top 和 margin-bottom 

  2.设置行高把height和line-height的值设置成一样的即可。

2.水平居中margin: 0 auto方式

       这种对齐方式要求内部元素是块级元素

        缺点和第一种方式一样

3.使用display:table-cell方式

        使用 display:table-cell 可以实现水平垂直都居中。

        使用display:table-cell，设置其属性水平居中text-align:center,垂直居中vertical-align:middle使元素居中,这个方式将要对其的元素属性设置成为一个td。

4.使用绝对定位Absolute方式

        设置position：absolute，再设置top,left属性或者bottom，right属性，这个方法需要计算出上下左右属性的值，总体来说不是很优。

5.使用Css3的translate水平垂直居中元素

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

这种方式同时支持水平居中和垂直居中

缺点：

（1）CSS transform 需要针对不同的浏览器使用特定的前缀（-moz  或  -o  或  -webkit）

（2）在低版本的IE (IE8 及以下 )中无效

6.使用弹性盒子，display:flex方式

display: flex;
justify-content: center; 
align-items: center; 

设置元素为弹性盒子，及其justify-content，align-items这俩个属性，

7. 使用伪元素居中

 .wrapper {
   width: 300px;
     height: 300px;
     border: 1px solid #ccc;
     text-align: center;
 }
 .wrapper::after {
     content: '';
     display: inline-block;
     vertical-align: middle;
     height: 100%;
 }
 .wrapper > h3 {
     display: inline-block;
     vertical-align: middle;
 }

<div class="wrapper">
   <h3>hellow word</h3>
</div>

该直居中方式的原理主要有以下几个要点：

（1）Css中元素默认是左上方对齐的

（2）伪元素高度与父元素保持统一

（3）父元素基线的位置可改变