居中（上下左右）布局

一、横向居中

1. 内联元素

要块级父元素内水平居中内联子元素，只需在父元素加上：text-align: center

.parent {
  text-align: center;
}

2. 块级元素

赋予块级元素width，设置左右margin：auto

.center-me {
  width:80%;
  margin: 0 auto;
}

3. 不管是块级元素还是内联元素

父元素加上display:flex ; justify-content:center

.parent {
  display:flex;
  justify-content:center;
}

二、纵向居中

1. 绝对定位

元素设置为绝对定位，top50%，margin为自己height的负数

.center-me {
  display:flex;
  justify-content:center;
}

2. 内联元素或表格元素（table-cell）

.center-me {
  vertical-align: middle;
}

3. padding和line-height

4. 神奇的flex

父元素加上display:flex；align-items: center

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