水平居中

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;
}