居中问题

水平居中，垂直居中

水平居中；

1. text–align*：center：*
当设置此属性的时候要注意，**它根据被居中的元素所占得总空间进行居中。**使用大div+小div（自定义宽度）无效，因为小div默认占满满一行。

2. margin :0,auto;
根据外边框进行居中（行元素:内外边距左右有效，宽高无效）
3. left: 50%; transform: translateX(-50%) 或者left: 50%; margin-left: --元素宽度的一半px; 定位大招
4. display: flex; justify-content: center（父div）;
弹性布局

垂直居中
1. 设置两个div同高
2. display:table-cell;和vertical-align: middle;(父div)：
这里需要注意的是如果设置水平居中也会出现它根据被居中的元素所占得总空间进行居中同样的问题。
3. top: 50%; transform:translateY(-50%);或者 top: 50%; margin-top: --元素高度的一半px; *
*4. display: flex; align-items: center;（父div）**;
弹性布局

水平垂直居中
1. margin auto
2. left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%);或者
left: 50%; top: 50%; margin-left: --元素宽度的一半px; margin-top: --元素高度的一半px;（定位大招）
3. 父元素为flex定位，justify-content: center; align-items: center;

总结
定位、flex基本解决问题