css元素垂直居中且固定高度如何实现_Flexbox align-items和justify-content

使用Flexbox可通过align-items和justify-content实现元素垂直水平居中。首先设置父容器display: flex，用align-items: center实现垂直居中，justify-content: center实现水平居中，子元素保持固定高度。该方法简洁高效，兼容性好，是现代布局首选方案。

要实现一个CSS元素在容器中垂直居中且保持固定高度，使用Flexbox是最简单高效的方式。通过 align-items 和 justify-content 两个属性，可以轻松控制主轴和交叉轴上的对齐方式。

基本结构与目标

假设你有一个固定高度的子元素（比如 100px），希望它在父容器中垂直居中显示。此时父容器使用 Flex 布局，并设置合适的对齐属性即可。

使用 align-items 实现垂直居中

在 Flex 容器中，align-items 控制的是交叉轴（cross axis）上的对齐。当 flex-direction 为 row（默认）时，交叉轴就是垂直方向，因此用它来实现垂直居中：

• 将父容器设为 display: flex
• 设置 align-items: center，使子元素在垂直方向居中

结合 justify-content 水平居中（可选）

如果还希望元素水平居中，可以加上 justify-content 属性。它控制主轴（main axis）的对齐方式：

• justify-content: center 可使子元素在水平方向居中（当主轴为 x 轴时）
• 配合 align-items: center 就能实现完全居中

代码示例

以下是一个完整例子：

  居中内容

CSS 样式：

.container {
  height: 300px;           /* 父容器有高度 */
  display: flex;
  align-items: center;     /* 垂直居中 */
  justify-content: center; /* 水平居中（可选） */
}
.item {
height: 100px;           / 固定高度 /
width: 200px;            / 固定宽度（可选） /
background: #007acc;
color: white;
display: flex;
align-items: center;
justify-content: center;
}

这样，.item 元素就会在其父容器中垂直且水平居中，同时保持 100px 的固定高度。

基本上就这些。Flexbox 让这类布局变得直观又可靠，兼容性也良好，是现代网页布局的首选方案。