CSS元素居中

---

水平居中

• 行内元素：给其父容器设置text-align:center
• 块级元素：首先设置宽度，然后margin：0 auto（必须设置宽度，因为块级元素默认占据一整行）

垂直居中

• 设置上下padding相等

• 绝对定位实现居中：

  {
  position:absolute;
  left:50%; 框的左上角居中
  top:50%;
  margin-left:-xxpx;框宽度的一半
  margin-top:-yypx;
  width:2xxpx;
  height:2yypx;
  /transform:translate(-50%,-50%);/ 当框的宽高不定时可用，CSS3的属性*
  }

• vertical-align实现居中：给父容器增加一个伪元素

  .box{
  width:
  height:
  }
  .box:before{
  content:"";
  display:inline-block;
  height:100%;首先父容器得设置height、
  vertical-align:middle;
  }

• table-cell实现居中：子元素的display设置为table-cell，vertical-align为middle，此时元素不为块级元素，若不设宽度为自动收缩。

• 父容器display:flex设置居中

  {
  width:
  height:
  display:flex;
  align items:center;垂直居中
  justify content:center;水平居中
  }