水平、垂直居中对齐全

水平居中

• 行内元素：父元素 text-align: center;
• 定宽块元素：margin: 0 auto;
• 不定宽块元素（由内容撑开）：display: inline-block; 再套一个父元素div，父元素：text-align-center
• 定宽定高块元素（行内、块）：父元素 display: flex; justify-content: center;

垂直居中（前提都是父元素高度确定）

• 行内元素：父元素line-height: 父元素高度;
  line-height制定的是元素中的内容的行高，行高包括上间距+文本高度+下间距。当父元素line-height等于height时，上间距和下间距就会把父元素高度中除开文本高度之外的地方全对半分了，所以开起来就是垂直居中的
  借鉴处
• 块元素高度确定：margin-top: calc((100% - height) / 2),margin-bottom同理
• 块元素高度不确定：父元素使用display: table-cell; vertical-align: middle;
• 定宽定高块元素：父元素 display: flex; align-item: center;