参考：CSS: 常用的元素居中方法

         CSS居中布局总结

 

1.水平居中

（1）文本水平居中

 

text-align: center;

（2）块级元素水平居中

①设置margin

margin: auto;

 

②display:inline-block+text-align:center

        .parent {
            width: 400px;
            height: 400px;
            background-color: aquamarine;
            text-align: center;
        }

        .child {
            width: 100px;
            height: 100px;
            background-color: #43ff26;
            display: inline-block;
        }

这样可以使一块级元素拥有一些inline元素的特性。

③absolute+transform

.parent {position:relative;}
.child {position:absolute;left:50%;transform:translateX(-50%);}

④ flex+justify-content

.parent {
            width: 400px;
            height: 400px;
            background-color: aquamarine;
            display: flex;
            justify-content: center;
        }

 

 

2.垂直居中

（1）文本垂直居中

①设置line-height和父元素高度一致，只适合单行文本的情况下。

（2）块级元素垂直居中

①table-cell+vertical-align

  .parent {display:table-cell;vertical-align:middle;}

优点：只需设置父节点，兼容性好

②absolute+transform

.parent {position:relative;}             .child{position:absolute;top:50%;transform:translateY(-50%);}

 

③ flex+align-items

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

 

 

3.水平垂直居中

（1）文本元素

text-align:center+line-height

（2）块级元素

①inline-block+text-align+table-cell+vertical-align

 .parent {text-align:center;display:table-cell;vertical-align:middle;}

 .child {display:inline-block;}

 

②absolute+transform

.parent {position:relative;}
.child{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);}

 

③flex+justify-content+align-items

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

④负margin(需精确计算长宽)

<div class="absolute_p1">
  <div class="absolute_c1"></div>
</div>

.absolute_p1 {
  position: relative;

  width: 200px; height: 200px;
}
.absolute_p1 .absolute_c1 {
  position: absolute; /* fixed 同理 */
  left: 50%;          top: 50%;

  width: 100px;       height: 100px;
  margin-left: -50px; margin-top: -50px;  /* 需根据宽高计算偏移量 */
}
  • 原理: 通过定位使元素左上角居中，再通过偏移值margin调整使元素中心居中
  • 缺点：高度宽度需事先知道，得通过其来计算负margin(好烦)

⑤定位实现居中(不需计算偏移值)

<div class="absolute_p2">
  <div class="absolute_c2"></div>
</div>

.absolute_p2 {
  position: relative;

  width: 200px; height: 200px;
}
.absolute_p2 .absolute_c2 {
  position: absolute; /* fixed 同理 */
  left: 0; top: 0; bottom: 0; right: 0; /* 定位为 0 */

  width: 100px; height: 100px;
  margin: auto; /* 不用计算偏移量 */
}

原理: 原理我也不知道啊！估计定位都给0了，元素自己也不知道该去哪儿，只好待在原地不知所措...