论CSS中子盒子在父盒子中水平居中的几种方法

首先创建两个盒子，嵌套层级

<div class="outer">
   <div class="inner"></div>
</div>

<style>
  .outer {  
      width: 300px;
      height: 300px;
      background-color: skyblue;
    }
    .inner {
      width: 100px;
      height: 100px;
      background-color: aquamarine;
    }
</style>
    

 方法1：绝对定位配合margin来实现，有两种不同的实现形式

第一种是在绝对定位的情况下将四个方向的距离都设置为0，然后margin属性设置为自动。

 .inner {
      position: absolute;
      top:0;
      bottom:0;
      left: 0;
      right: 0;
      margin: auto;
      width: 100px;
      height: 100px;
      background-color: aquamarine;
    }

第二种方法是将top和left设置为50%，然后将margin-left和margin-top设置为负的盒子宽高/2

  .inner {
      position: absolute;
      top:50%;
      left: 50%;
      margin-left: -50px;
      margin-top: -50px;
      width: 100px;
      height: 100px;
      background-color: aquamarine;
    }

 实现效果如下 ：（注：父盒子需要加上相对定位 position:relative）

方法2：通过transform变形里的translate位移来实现，可以替换掉上述第二种方法中的margin

因为translate按照百分比位移的时候是根据盒子自身的大小来判定的，所以可以免去盒子宽高/2的计算，直接写-50%就可以实现

   .inner {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 100px;
      height: 100px;
      background-color: aquamarine;
      transform: translate(-50%,-50%);
    }

效果依然不变

方法3：通过flex布局来实现

flex可以通过控制主轴和侧轴的方式来实现各种方式的排列，将主侧的对其方式都设置为居中（center）即可直接实现子元素水平垂直居中

注：flex的属性是写在父元素内的，是通过给父元素设定规则来控制子元素的排列方式

.outer {  
      display: flex; /* 父元素加上flex */
      width: 300px;
      height: 300px;
      background-color: skyblue;
      justify-content: center; /*相对于主轴居中*/
      align-items: center; /*相对于侧轴居中*/
    }

 实现效果如下：

 总结：

方法1的两种通过定位配合margin的实现方式是以前的常用方法，步骤较为繁琐，而且需要计算。

在css3问世后，通过变形位移(transform:translate)的方法2来实现是较为简便的方法，百分比位移根据盒子自身大小来判定这一点能够省去一部分计算的时间。

方法3通过flex布局来实现是目前使用的较为频繁的方式，简单，快捷，高效。