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

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

P粉602998670

发布： 2025-12-22 19:16:02

原创

939人浏览过

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

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

要实现一个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 就能实现完全居中

代码示例

以下是一个完整例子：

<div class="container">
  <div class="item">居中内容</div>
</div>

登录后复制

CSS 样式：

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

登录后复制

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