CSS居中方式总结

1.text-align:center;

　　使用以上方式居中是将父级容器中display:inline;的行内元素或者文字进行水平居中。

2.inline-height:(height)值;

　　使用inline-height时经常和height一起使用，使得内容垂直方向上居中，建议在列表内部的li中使用；

3.margin:auto;

　　使用margin来居中时，一般是在元素给出了确切的width值，设置margin:auto; 或者 margin: 0 auto; 是一样的效果：当前的元素将水平居中；

　　使用margin时，也可以设置 margin-left和margin-right的值相等，也能实现水平居中；

4.position定位居中

　　根据top和left或者bottom、right进行设置，可使元素水平、垂直居中；但是父级元素必须设置高度；

5.Flex盒子

　　Flex容器的flex-align:center;

　　　　　　　align-items:center;

　　　　　　　justify-cotent:center;

　　项目属性的align-self:center;

6.负值margin：

.box {
    width: 600px;
    height: 400px;
    position: relative;
} 

.box1 {
    width: 300px;
    height: 200px;
    padding: 20px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -170px;/*(width+padding)/2 */
    margin-top: -120px;/*(height+padding)/2 */
} 

　　以上代码可实现元素的水平垂直居中。