全部详情查看:https://segmentfault.com/a/1190000013966650

1 水平居中
1.1 内联元素水平居中
利用 text-align: center 可以实现在块级元素内部的内联元素水平居中。此方法对内联元素(inline), 内联块(inline-block), 内联表(inline-table), inline-flex元素水平居中都有效。

核心代码:

.center-text {
text-align: center;
}

1.2 块级元素水平居中
通过把固定宽度块级元素的margin-left和margin-right设成auto,就可以使块级元素水平居中。

核心代码:

.center-block {
margin: 0 auto;
}
演示程序:

演示代码

1.3 多块级元素水平居中
1.3.1 利用inline-block

如果一行中有两个或两个以上的块级元素,通过设置块级元素的显示类型为inline-block和父容器的text-align属性从而使多块级元素水平居中。

核心代码:

.container {
text-align: center;
}
.inline-block {
display: inline-block;
}

最后由 Leo 编辑于2018年03月27日 10:36