居中 content 的 CSS

在编写网页时，我们经常需要将元素的内容在其父级容器中居中对齐。这里介绍几种实现方式。

水平居中

text-align

如果父级容器是块级元素，该元素是文本元素（如<p>、<h1>等），那么可以通过设置父级容器的text-align属性来实现该元素的水平居中。

.parent {
  text-align: center;
}

margin

如果元素是块级元素，我们可以通过设置该元素的左右 margin 值为 auto 来实现水平居中。

.child {
  margin: 0 auto;
}

flexbox

在父级元素上应用 Flexbox 布局可以非常简单地实现水平居中。

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

垂直居中

line-height

如果元素只有一行文本，并且高度已知，可以通过设置元素的 line-height 值与容器的高度相等来实现垂直居中。

.parent {
  height: 100px;
}

.child {
  height: 40px;
  line-height: 100px;
}

transform

通过设置元素的 translate 属性可以将元素相对于其父级垂直居中。需要注意的是，元素的 height 必须已知。

.parent {
  position: relative;
  height: 200px;
}

.child {
  position: absolute;
  top: 50%;
  height: 40px;
  transform: translateY(-50%);
}

Flexbox

在父级元素上应用 Flexbox 布局，可以通过设置align-items: center实现垂直居中。

.parent {
  display: flex;
  align-items: center;
}