flex布局垂直居中

admin 2024年01月30日 11:28 39 0

在Flex布局中，垂直居中元素可以通过设置`align-items`属性为`center`来实现，以下是一个简单的示例：

HTML:

<div class="flex-container">
  <div class="flex-item">
    我是垂直居中的内容
  </div>
</div>

CSS:

.flex-container {
  display: flex;
  align-items: center; /* 垂直居中 */
}

.flex-item {
  width: 100px;
  height: 100px;
  background-color: red;
}

在这个例子中，`.flex-container`是一个使用Flex布局的容器，`.flex-item`是其中的一个子元素，通过设置`align-items: center;`，`.flex-item`会在垂直方向上居中。