元素及文本的水平居中/垂直居中/绝对居中总结

元素及文本的水平居中、垂直居中和绝对居中是前端开发中经常遇到的问题，以下是常用的解决方法及总结：

元素及文本的水平居中

一、使用margin实现居中

如果元素的宽度固定，可以使用margin属性来实现元素的水平居中。

.container {
  width: 100%;
}

.box {
  width: 200px;
  margin: 0 auto;
}

以上代码中，margin:0 auto是将元素左右外边距设为自动，这样元素就会自动居中。

二、使用text-align实现文本的居中

如果想让文本水平居中，可以使用text-align属性来实现。

.container {
  width: 100%;
  text-align: center;
}

.box {
  display: inline-block;
}

以上代码中，使用text-align:center让容器内的元素都居中，同时将元素设置为display:inline-block，让元素不再占满整个容器，使其可以居中。

元素及文本的垂直居中

一、使用display:flex实现元素垂直居中

如果元素高度已知，可以使用display:flex来实现元素的垂直居中。

.container {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.box {
  height: 100px;
}

以上代码中，使用display:flex将容器设置为弹性布局模式，再使用justify-content:center将其子元素在横向上居中，使用align-items:center将其子元素在纵向上居中。

二、使用绝对定位实现元素的垂直居中

如果元素高度不确定，可以使用绝对定位方式实现元素的垂直居中。

.container {
  position: relative;
}

.box {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

以上代码中，将容器设置为position:relative，在子元素中使用绝对定位position:absolute来使其脱离文档流，并使用top:50%让其上边缘与父元素下边缘对齐，然后使用transform:translateY(-50%)将元素向上移动自身高度的50%，从而实现了元素的垂直居中。

元素及文本的绝对居中

如果想让元素绝对居中，可以结合以上两种方法来实现。

.container {
  position: relative;
}

.box {
  width: 200px;
  height: 100px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -50px;
  margin-left: -100px;
}

以上代码中，将容器设置为position:relative，在子元素中使用position:absolute进行绝对定位，再使用top:50%和left:50%将元素的左上角移动到容器的中心点，最后使用margin-top:-50px和margin-left:-100px分别把元素的上外边距和左外边距设置为自身高度和宽度的一半，从而实现了元素的绝对居中。