好程序员前端教程css对齐方案总结
垂直居中
通用布局方式(内敛元素和块状元素都适用)

利用flex:
核心代码:

.container{display:flex;flex-direction:column;justify:center}

利用transformX(-50%):
核心代码:

.container{width:300px;height:300px;background:red;position:relative;}.child{position:absolute;top:50%;transform:translateY(-50%);-webkit-transform:translateY(-50%);}

内敛元素的垂直居中

单行内敛元素:设置内敛元素的高度和行高相等
核心代码:

.container{height:120px;line-height:120px;}

块状元素

固定元素高度的块状元素
核心代码

.container{position:relative;}.child{position:absolute;top:50%;height:100px;margin-top:-50px;}

未知高度的块状元素
当垂直居中的元素的高度和宽度未知时，我们可以借助CSS3中的transform属性向Y轴反向偏移50%的方法实现垂直居中。但是部分浏览器存在兼容性的问题。
核心代码:

.container{position:relative;}.child{position:absolute;top:50%;transform:translateY(-50%);}

水平居中
通用布局方式

flex布局
核心代码：

.container{display:flex;justify-content:center;}absoulte+transform

核心代码:

.container{position:relative;}.child{position:absolute;left:50%;transform:translateX(-50%);}

内敛元素水平居中

text-align:center
核心代码:

.container{text-align:center}

块状元素水平居中

使用 margin:0 auto 必须注明子元素和父元素的宽度
核心代码:

.container{margin:0auto}

多块状元素：
利用内敛元素布局方式container属性为text-align:center;
核心代码:

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

水平垂直居中
固定宽高元素水平垂直居中

通过margin平移元素整体宽度的一半，使元素水平垂直居中。
核心代码:

.container{position:relative;}.child{width:300px;height:100px;padding:20px;position:absolute;top:50%;left:50%;margin:-70px00-170px;}

未知宽高元素水平垂直居中

利用2D变换，在水平和垂直两个方向都向反向平移宽高的一半，从而使元素水平垂直居中。
核心代码：

.parent{position:relative;}.child{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);}

利用flex布局
利用flex布局，其中justify-content 用于设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式；而align-items属性定义flex子项在flex容器的当前行的侧轴（纵轴）方向上的对齐方式。
核心代码：

.container{display:flex;justify-content:center;align-items:center;}

相对于 body 的水平垂直居中

列表布局(兼容性好)
核心代码:

.outer{display:table;position:absolute;height:100%;width:100%;}.middle{display:table-cell;vertical-align:middle;}.inner{margin-left:auto;margin-right:auto;width:400px;}

position 布局
核心代码

.container{position:absolute;margin:auto;left:0;top:0;right:0;bottom:0;}