css 实现水平居中的方法总结

css 实现水平居中，垂直居中，水平垂直居中，是css 入门的必修课题，也是代码实践,笔试面试中经常遇到的场景。这次的内容主要围绕着几种场景下的，多种水平居中方法的实现

实现场景：蓝色方块需要在父元素内部水平居中

image.png

1. 居中元素为块级元素

基础代码

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

.container{
  width: 100px;
  border:1px solid red;
  height: 100px;
}
.container .box{
  font-size: 20px;
  line-height: 50px;
  background-color: blue;
  color: white;
}

块级元素的特点：可设置元素的宽度，在不设置宽度时，元素的宽度会自动填满其父元素宽度，并独占一行

1.1 margin: auto

居中元素设置宽度，并且设置 margin: auto 可实现水平居中

.container .box{
  height: 50px;
  width: 50px; /* 设置宽度 */
  margin: 0 auto; /* 设置宽度 */
}

问题： margin: auto 实现水平居中的前提是，元素的宽度已知，当宽度值未知时，见2.2

2. 居中元素为行内元素

基础代码

<div class="container">
    <span class="box">牛</span>
</div>

.container{
  width: 100px;
  border:1px solid red;
  height: 100px;
}
.container .box{
  font-size: 20px;
  background-color: blue;
  color: white;
}

行内元素的特点：行内元素的宽度为元素自身撑起的宽度，和其他元素在同一行，高度，宽度，内边距等都是不可控的，即设置padding-left, padding-right, margin-left, margin-right, height, width 都无法生效

2.1 text-align: center

利用行内元素的特点，设置 text-align：center 使元素居中

.container{
  text-align: center;
}

2.2 display：inline-block 改变模型

利用行内元素设置 text-align 实现水平居中的方法，可以针对居中元素为块级元素，但宽度不确定时（即1.1 问题)的场景

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

.container{
  text-align: center;
}
.container .box{
  display: inline-block;
  *display: inline; /*兼容性代码*/
  *zoom: 1; /*兼容代码*/
}

问题: 需要解决 display: inline-block 在IE 下的兼容性问题

3. 利用定位实现水平居中(已知宽度)

相对定位：相对定位就是将元素偏离元素的默认位置，但是并没有脱离文档流，只是视觉上发生的偏移，不会改变元素的display 属性

绝对定位：相对于设置了相对定位的上层元素或者顶级元素的相对位置，无论设置的元素为块级元素还是行内元素，position 设置成absolute 之后，元素display 表现为 block，元素脱离文档流，父元素无法知道该元素的高度

因此，从以上的定义我们可以得到一种新的水平居中的方式，父级元素设为相对定位，居中元素设置为绝对定位，设置居中元素的宽度，并相对于父元素设置位置

.container{
  position: relative;
}
.container .box{
  position: absolute;
  width: 50px; /*设置宽度*/
  left: 50%; /*左移50%*/
  margin-left: -25px; /*修正位置*/
}

缺点：缺点是需要知道元素的宽度

4 利用定位，translate 实现水平居中(未知宽度)

对于已知元素的宽度，我们可以使用3中的 margin-left: -25px; /*修正位置*/ 进行精确的定位，而对于不知道宽度的元素，我们可以使用 translate 来精准定位，只需要将 margin-left: -25px; /*修正位置*/ 替换成 transform: translate(-50%, 0) 即可

.container .box{
  font-size: 20px;
  background-color: blue;
  color: white;
  position: absolute;
  left: 50%;
  transform: translate(-50%, 0);
  width: 50px;
}

5. flex 布局实现

Flex是Flexible Box的缩写，意为”弹性布局”，父元素设置成flex 布局，可以将子元素设置为水平居中，（但是flex布局部分浏览器无法使用）

.container{
  display: flex;
  justify-content: center
}

6. tabel-cell布局

实际项目中并不常见，故暂不提及。