如何让一个元素水平垂直居中？

弹性盒子

flex

html

<div class="container">
  <div class="box">内容</div>
</div>

css

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

flex + margin

html

<div class="container">
  <div class="box">内容</div>
</div>

css

.container {
  display: flex;
}

.box {
  margin: auto;
}

网格布局

grid

html

<div class="container">
  <div class="box">内容</div>
</div>

css

.container {
  display: grid;
  align-items: center;
  justify-items: center;
  /* 简写 */
  /* place-items: center; */
}

grid + margin

html

<div class="container">
  <div class="box">内容</div>
</div>

css

.container {
  display: grid;
}

.box {
  margin: auto;
}

position + transform

html

<div class="container">
  <div class="box">内容</div>
</div>

css

.container {
  position: relative;
}

.box {
  position: absolute;
  top: 50%; /* 相对于父容器的顶部偏移50% */
  left: 50%; /* 相对于父容器的左侧偏移50% */
  transform: translate(-50%, -50%); /* 相对于自身宽高的50%偏移 */
}

inline-block

html

<div class="container">
  <span class="inline-box">内容</span>
</div>

css

.container {
  text-align: center; /* 水平居中 */
  height: 50px;
  line-height: 50px; /* 需要明确父容器高度 */
}

table

html

<div class="container">
  <div class="box">内容</div>
</div>

css

.container {
  display: table-cell; /* 将容器设置为表格单元格 */
  text-align: center; /* 水平居中 */
  vertical-align: middle; /* 垂直居中 */
}