使用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 让这类布局变得直观又可靠，兼容性也良好，是现代网页布局的首选方案。
