CSS中的垂直和水平居中对齐

在网页设计中，经常需要把元素垂直或者水平居中对齐。这里我们给大家介绍一种叫做 align-item 属性的CSS功能，来管理如何在页面中将元素水平或垂直居中对齐。

align-item

align-item 属性定义了一个 flex 容器的在当前行上的对齐方式。可以将元素垂直居中在其容器中。

值

• stretch：元素被拉伸以适应容器。
• center：元素位于容器的中心位置。
• flex-start：元素位于容器的开头位置。
• flex-end：元素位于容器的结尾处。
• baseline ：元素位于容器的基线位置。

示例

下面是 align-item 的使用示例，其中 flex 作为容器，

.flex {
  display: flex;
  height: 200px;
}

.child {
  width: 100px;
  height: 100px;
  background-color: pink;
  align-item: center;
}

居中对齐

在以上代码中，.flex 是父元素，里面包含一个宽高为 100px 粉色方块。align-item 属性用来控制它的垂直居中对齐。

水平对齐

通过以下示例，我们可以将元素水平居中：

.flex {
  display: flex;
  height: 200px;
  justify-content: center;
  align-items: center;
}

.child {
  width: 100px;
  height: 100px;
  background-color: pink;
}

我们将 .flex 上添加了两个属性，justify-content: center 和align-items: center 以实现水平居中对齐和垂直居中对齐。

总结

在这篇文章中，我们了解了如何使用 align-item 和 justify-content 这两个CSS属性来实现垂直或水平居中对齐。希望这篇文章对你有所帮助！