CSS居中布局方案

基本结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div class="parent">
        <div class="child">CSS居中方案</div>
    </div>
</body>
</html>

方案
1.父元素的text-align：center

.parent{
    text-align:center;
}
.child{
    margin:20px 100px;
    display: inline-block;
    border:1px solid black;
}

解释说明：text-align元素对块级元素和单元格（table-cell）起作用，其可使子元素居中显示。子元素添加display : inline-block ; 目的是为了是自身宽度自适应内容的宽度。

优点：兼容性好。在IE6、7下显示会有问题，可以通过{display：inline-block；zoom：1；}模拟display：inline-block。

缺点：子元素继承了父元素的text-align:center属性，会导致其内容居左显示，因而可以给子元素添加text-align属性使其正常显示它应该显示的地方。

2.margin: 0 auto;

.child{
margin:20px auto;
display: table;
border:1px solid black;
}

解释说明：display：table；属性使其表现上像是block元素，而在宽度上，可以随内容而改变（自适应）。

优点：样式简单，兼容性好

3.绝对定位+偏移50%;

.parent{position: relative;}
.child{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    border: 1px solid black;
    }

解释说明：通过定位来实现居中，由于left：50%；会使子元素从父元素的50%处开始显示的，为了使子元素居中可以通过transform：translateX(-50%)；来使子元素向左移动相对自身的宽度50%，这用就实现居中了。

缺点：兼容性不好。transform属性的兼容性不好。

3.flex

.parent{
    display: flex;
    justify-content: center;
}
.child{
    border: 1px solid black;
}

解释说明：display：flex ;多列多栏布局。justify-content适用于：flex容器，设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式。

优点：只需要设置父元素的样式

缺点：兼容性差。