说到css布局，居中是个难题，不同的情境有不同的解决方案，详情如下
水平居中
行内元素水平居中
设置容器text-align:center;对于行内元素起作用，也包括display为inline-block, inline-table, inline-flex的元素。
See the Pen VPGpxz by jervis (@jevirs) on CodePen.
## 块级元素水平居中
设置元素
margin:0 auto;，元素需要设置宽度，否则元素宽度就是容器宽度。See the Pen WRgpBB by jervis (@jevirs) on CodePen.
多个块级元素水平居中
单行排列
1.将块元素display设置为inline-block,化为行内元素的思路。
2.利用flex布局，实现水平居中。
See the Pen PWdpxB by jervis (@jevirs) on CodePen.
多行排列
使用多个单一块级元素水平居中即可。
垂直居中
行内元素垂直居中
单行元素垂直居中
1.如果容器的padding-top和padding-bottom相等，那么此行内容会垂直居中。
2.设置容器的line-height和height相等，这里容器需要为可设置高度的元素。
3.其他方法见下文多行元素垂直居中。
See the Pen wgEJLN by jervis (@jevirs) on CodePen.
多行元素垂直居中
1.使用表格元素，并不推荐，造成dom结构冗余。
2.设置容器display: table;,元素display: table-cell;vertical-align: middle;,无需改变dom只套用表格样式。
3.使用flex布局，设置display: flex;justify-content: center;flex-direction: column;。
See the Pen VPGpoQ by jervis (@jevirs) on CodePen.
块级元素的垂直居中
1.已知元素高度的情况下，设置自容器相对于父容器的绝对定位，并设置top: 50%;，margin-top为负的高度的一半的。
2.未知元素的高度，思路和设置自容器相对于父容器的绝对定位相似，设置top: 50%;，只不过这里设置transform: translateY(-50%)而不是margin-top。
3.嫌麻烦吗？直接用flex布局吧。
See the Pen qRMmWX by jervis (@jevirs) on CodePen.
注意到设置成绝对定位后，块级元素的宽度会自适应内容宽度，而flex则不会有这个问题。
水平垂直居中
1.已知元素的宽度或者高度，利用绝对定位后使用margin微调。
2.未知元素的宽度或者高度，利用绝对定位后使用transform微调。
3.还是flex。
See the Pen NdLjKV by jervis (@jevirs) on CodePen.
总结
相信你看得出来flex布局代码量少，逻辑清晰，简单粗暴，以后要尽量使用flex。