水平居中
1、行内元素
父元素：
text-align: center;
此方法父元素有没有宽度都ok
2、块级元素
- 需要居中的元素设置宽度
- 设置css
margin: 0 auto;
3、float元素
此方法一般是水平居中和垂直居中
- 需要居中的元素设置宽度
- float: left
- position: relative;
- left: 50%;
- margin-left: -(width/2)
{
width: 150px;
float: left;
position: relative;
left: 50%;
margin-left: -150px;
}
4、绝对定位元素
{
width: 150px;
position: absolute;
left: 50%;
margin-left: -150px;
}
5、flex布局
父元素：
{
display: flex;
justify-content: center;
}
垂直居中
1、单行文本居中
line-height = height
2、上下padding相等
父元素高度不确定，但弹窗无效
3、绝对定位实现居中
margin-left: -（宽度的一半）
margin-top: -(高度的一半)
等价于：
transform: translate(-50%,-50%)
4、vertical-align实现居中
作用在行内元素和表格
vertical-align: middle
两个行内元素中心线对齐
5、table-cell实现居中
给父容器加:
display: table-cell;
vertical-align: middle;
6、flex
给父容器加：
{
display: flex;
align-items: center;
}
