HTML元素垂直水平居中问题

HTML元素垂直水平居中问题

写下自己的思考是个好习惯，可以总结自己的学习和智慧，巩固知识，也可以让自己不犯同样错误。希望自己可以坚持下来。

垂直水平居中方式

基本的DOM结构如下：

<div class="box">
    <div class="sub center"></div>
</div>

flex

原理： 控制元素再主轴和交叉轴上居中

父元素的 display设置成 flex

把主轴和交叉轴都设置成居中

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

position + calc 和 position + translate

**原理：**先用定位把子元素的左上角定位到父元素的正中心，然后再向左上移动子元素自身的一半，使得子元素的正中心和父元素的正中心重合，实现水平垂直居中

position + calc

给父元素设置 position，这可以让子元素的 position 相对与父元素定位

子元素设置 left、top为 calc(50% - 子元素宽或者高的一半)

如果不用 calc，也可以用 margin 达到同样的效果

缺点： 需要知道子元素的宽高，还得自己计算，还不能自适应

.box {
  position: relative;
}
.sub {
  position: absolute;
  left: calc(50% - 100px);
  top: calc(50% - 100px);
  /* margin-left: -100px;
  margin-top: -100px; */
}

position + translate

子元素宽高的需要自己计算并不是很友好

且不能自适应

所以我们可以用 translate 来实现子元素向左上移动自身的一半

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

position + margin:auto

原理：margin:auto 会把剩余的可分配空间平均分配，定位时把每个方向上的偏移量全都设成0，就会把整个除自身占领的空间外（不确定），相对定位的元素的空间当作可分配空间，平均分配一下就可以垂直水平居中了（margin:0 auto实现水平居中就是这个原理）

先给父元素设置一个 position，使子元素相对与父元素定位

把子元素设置为绝对定位，并且把上下左右的偏移量全部设置为0

给子元素设置 margin:auto

.box {
  position: relative;
}

.center {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}

text-align + line-height + vertical-align

原理：行内元素可以通过 text-align:center 来水平居中； vertical-align:middle 会让行内元素垂直居中再这一行中，然后通过 line-height:父元素高度 把高度拉满，那么子元素就相对于父元素垂直居中了

父元素设置 text-align: center ，并且把 line-height 设为父元素高度

子元素把 display 设置为行内元素或者行内块元素，并设置 vertical-align:middle、

.box {
  width: 60vw;
  height: 60vh;
  text-align: center;
  line-height: 60vh;
}

.center {
  display: inline-block; 
  vertical-align: middle;
}

table-cell

原理： display:table-cell 可以设置宽高，也可以通过 vertical-align: middle 实现垂直居中。只要把子元素设置成行内元素或者行内块级元素，就可以通过 text-align:center 实现水平居中

.box {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}
.center {
  display: inline-block;
}

grid

原理： grid 居中方法类似 flex

.box {
  display: grid;
  align-items: center;
  justify-content: center;
}
.center {
  /* align-self: center;
  justify-self: center; */
}

总结

其实实现垂直居中方法基本就三种：

1. 利用 flex 或者 grid 的主轴和交叉轴
2. 利用行内元素的 text-align 和 vertical-align
3. 利用定位