水平居中

1、行內(nèi)元素

父元素：

text-align: center;

此方法父元素有沒有寬度都o(jì)k

2、塊級元素

• 需要居中的元素設(shè)置寬度
• 設(shè)置css

margin: 0 auto;

3、float元素

此方法一般是水平居中和垂直居中

• 需要居中的元素設(shè)置寬度
• 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、絕對定位實(shí)現(xiàn)居中

margin-left: -（寬度的一半）
margin-top: -(高度的一半)
等價(jià)于：
transform: translate(-50%,-50%)

4、vertical-align實(shí)現(xiàn)居中

作用在行內(nèi)元素和表格

vertical-align: middle

兩個(gè)行內(nèi)元素中心線對齊

5、table-cell實(shí)現(xiàn)居中

給父容器加:

  display: table-cell;
  vertical-align: middle;

6、flex

給父容器加：

{
    display: flex;
    align-items: center;
}