水平垂直居中总结

水平垂直居中总结

html结构

  <div class="container">
    <div class="box">text</div>
  </div>

一 box 为行内元素时，

水平居中

方案：父元素设置 text-align：center；

垂直居中

方案一：
父元素设置 display：table-cell；vertical-align：middle；
子元素设置：display：inline or inline-block；
方案二：
子元素设置：line-height：父元素的height；

三 box为块级元素时，水平垂直居中

方案一：水平居中，父元素设置 margin：0 auto；
方案二：父相子绝， 子元素设置left：0；right：0；top：0；bottom：0；margin：0 auto；
方案三：父子都设置box-sizing：border-box；利用子元素的margin-left或者父元素的padding-left：（父宽 - 子宽）/ 2;
方案四：利用自元素，left：50%；top：50%；transform:translate(-子元素宽，-子元素的高);
方案五：flex布局；