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;
}
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>42度空间-多块级元素水平居中-inline-block</title> 6 <style> 7 .container { 8 height:100px; 9 padding: 8px; 10 text-align: center; 11 border: 2px dashed #f69c55; 12 } 13 .inline-block { 14 padding: 8px; 15 width: 4rem; 16 margin: 0 8px; 17 color: #fff; 18 background: #000; 19 display: inline-block; 20 } 21 </style> 22 </head> 23 <body> 24 <div class="container"> 25 <div class="inline-block"> 26 简单不先于复杂 27 </div> 28 <div class="inline-block"> 29 而是在复杂之后 30 </div> 31 <div class="inline-block"> 32 简单不先于复杂，而是在复杂之后。 33 </div> 34 </div> 35 </body> 36 </html>
运行结果：
1.3.2 利用display: flex
利用弹性布局(flex)，实现水平居中，其中justify-content 用于设置弹性盒子元素在主轴（横轴）方向上的对齐方式，本例中设置子元素水平居中显示。
核心代码：
.flex-center {
display: flex;
justify-content: center;
}
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>42度空间-多块级元素水平居中-弹性布局</title> 6 <style> 7 .flex-center { 8 padding: 8px; 9 display: flex; 10 justify-content: center; 11 border: 2px dashed #f69c55; 12 } 13 .flex-center >div { 14 padding: 8px; 15 width: 4rem; 16 margin: 0 8px; 17 color: #fff; 18 background: #000; 19 } 20 </style> 21 </head> 22 <body> 23 <div class="flex-center"> 24 <div> 25 简单不先于复杂。 26 </div> 27 <div> 28 简单不先于复杂，而是在复杂之后。 29 </div> 30 <div> 31 而是在复杂之后。 32 </div> 33 </div> 34 </body> 35 </html>
运行结果：