css之居中布局

1. 水平居中

• 针对于行内元素(inline):text-align:center;
• 针对于块级元素(block):宽度设置为auto;

• 针对于多个块级元素，对父元素设置text-align:center;对子元素设置display:inline-block;或者使用flex布局。

  2. 垂直居中

• 对于行内元素(inline)
  单行:设置上下padding相等；或者设置line-height和height相等；
  多行：设置上下padding相等；或者设置 display: table-cell; 和 vertical-align: middle;；或者使用 flex 布局；或者使用伪元素；

• 对于块级元素(block)
  已知高度：子元素使用绝对布局top:50%;再用负的margin-top把子元素往上拉一半的高度；
  未知高度：子元素使用绝对布局 position: absolute; top: 50%; transform: translateY(-50%);
  使用 Flexbox：选择方向，justify-content: center;
  3. 水平垂直居中

• 定高定宽：先用绝对布局 top: 50%; left: 50%;，再用和宽高的一半相等的负 margin 把子元素拉回

• 高度和宽度未知：先用绝对布局 top: 50%; left: 50%;，再设置 transform: translate(-50%, -50%);

• 使用 Flexbox：justify-content: center; align-items: center;