CSS-盒子水平居中-持续更新

一、CSS-盒子水平居中几种姿势

演示环境代码：

// css
.outer-box {
  width: 300px;
  height: 300px;
  border: 1px solid #ccc;
}

.inner-box {
  width: 100px;
  height: 100px;
  background-color: red;
}
// html
<div class="outer-box">
  <div class="inner-box"></div>
</div>

1. 使用margin

代码：

.inner-box {
  /* 
  	如果已经是块级元素，则不需要这句，
  	如果不是块级元素，则需要设置下，display: block|table|flex|grid
  	但不能是 inline-xxx 即一定为块级元素
  */
  display: block; 
  margin: 0 auto;
}

效果：

原理：

这就涉及到一个名词：横向格式化属性。它包含七个属性：margin-left、border-left-width、padding-left、width、padding-right、border-right-width、margin-right，这七个属性影响着块级框横向布局。它们七个的值的和正好等于父元素的宽度【width值】

具体等式：margin-left + border-left-width + padding-left + width + padding-rigth + border-right-width + margin-righ = width

这七个值中可以设置为auto的值只有三个，margin-left、margin-right、width,如果将其中的一个值设置为auto，其它两个值设置为具体值，那么设置为auto的那个属性的具体长度要能满足和其他属性加起来正好等于父元素的宽度，即满足上面的等式。

利用该特性：将width设置为具体指，margin-left、margin-right为auto，正好可以实现水平居中。

兼容程度：

优劣：

1. 兼容程度比较好，基本上主流浏览器都支持，IE从6开始就支持该属性。
2. 简单粗暴。

**缺点：**需要固定居中块元素的宽。

2. 使用text-algin + inline-block

代码：

.outer-box {
  text-align: center;
}
.inner-box {
  display: inline-block;
}

原理：

text-align属性定义行内内容如何相对它的块父元素对齐。text-align对块级元素无效，只能控制行内内容对齐。

利用该特性：我们可以将子元素转成inline-block，行内块。然后在父元素上使用text-align：center；使子元素达到水平居中的效果。

兼容程度：

优劣：

1. 兼容也是比较好的，简单粗暴
2. 2.只适合内联元素，常用的场景就是文本类型。

3. 使用fit-content + margin

代码：

.inner-box {
  width: fit-content;
  margin: auto;
}

效果：

原理：

width:fit-content可以在实现元素收缩效果的同时，保持原本的block水平状态，于是，可以直接使用margin:auto实现元素向内自适应同时的居中效果。

兼容：

优劣：

1. IE兼容不够理想。
2. 子元素的宽度，靠子元素本身的内容进行撑开，无需固定宽度。

4. 使用flex

代码：

.outer-box {
  display: flex;
  /* flex布局中，定义了项目在主轴上的对齐方式。center表示居中显示 */
  justify-content: center;
}

效果：

原理：

利用flex布局方式

兼容：

优劣：

1. 兼容尚可。
2. 与flex布局搭配使用。
3. 无需子元素固定宽度

5. 使用grid

代码：

.outer-box {
  display: grid;
}

.inner-box {
  justify-self: center;
}

效果：

原理：

display: grid;采用网格布局，【默认是块级元素】。justify-items属性设置单元格内容的水平位置：【start：对齐单元格的起始边缘】、【end：对齐单元格的结束边缘】、【单元格内部居中】、【stretch：拉伸，占满单元格的整个宽度】

兼容：

优劣：

1. 对IE的兼容不是很好。

2. 使用到了二维布局方式：网格布局。

6. 使用定位居中【absolute + transform】

代码：

.outer-box {
  position: relative;
}

.inner-box {
  position: absolute;
  left: 50%;
  transform: translate(-50%);
}

效果：

原理：

利用“子绝父相”技巧，left:50%;将子元素的盒子向左移动50%，其实这个时候，盒子并没有居中，向右多移了本身盒子的50%。这是因为移动的时候，都是以盒子的左上角为基准的。再使用transform: translate(-50%)；将这50%平移回来，达到居中的效果。

兼容：


优劣：

1. 相对前面几种，要复杂了点。
2. 兼容支持也是不错的。

7. 使用定位居中【absolute + calc】

代码：

.outer-box {
  position: relative;
}

.inner-box {
  position: absolute;
  left: calc(50% - 50px);
}

效果：

原理：

使用定位加left的方式，会多偏移子元素宽度的一半，可以使用calc计算函数，50%父盒子的宽度 减去子盒子宽度的一半，就是正好需要偏移的宽度。前提是需要知道子盒子的宽度，也就是说需要固定子盒子的宽度。

兼容：

优劣：

1. 需要固定子盒子的宽度
2. 对IE兼容不是很友好。

8. 使用定位居中【absolute + 负margin】

代码：

.outer-box {
  position: relative;
}

.inner-box {
  position: absolute;
  left: 50%;
  margin-left: -50px;
}

效果：

原理：

使用定位加left的方式，会多偏移子元素宽度的一半，可以使用margin-left的方式，向左偏移盒子宽度的一半，就是正好达到居中的要求。前提是需要知道子盒子的宽度，也就是说需要固定子盒子的宽度。

兼容：

优劣：

1. 兼容性良好。
2. 需要固定子盒子的宽度。

9. 使用定位居中【absolute + margin:auto】

代码：

.outer-box {
  position: relative;
}

.inner-box {
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
}

效果：

原理：

使用了 CSS 中的定位属性（absolute、fixed 等）后，如果 left 设置了具体值，没有设置 right 和 width，那么就会自动计算，把剩余的空间分配给 right 和 width。如果 left、right 和 width 都设置了具体值，并且没有占满横向空间，那么剩余空间就处于待分配状态，此时设置 margin: auto; 意味着把剩余的空间分配给 margin，并且左右均分，所以就实现了水平居中。

兼容：

同absolute + 负margin的方式

优劣：

1. 兼容性良好。
2. 需要固定子盒子的宽度。
3. 其次如果你css的样式未使用到定位属性，使用margin: auto或者margin: 0 auto的方式，要比这个简洁的多。