css flexbox实现垂直居中方法

使用 CSS Flexbox 可轻松实现垂直水平居中，只需设置父容器 display: flex、justify-content: center 和 align-items: center，并确保容器有高度，适用于模态框、登录页等场景。

使用 CSS Flexbox 实现垂直居中非常简单且高效，只需要几行代码就能让子元素在父容器中水平和垂直居中。

基本结构

假设有如下 HTML 结构：

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

Flexbox 垂直+水平居中方法

给父容器设置 Flexbox 属性即可：

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh; /* 确保容器有高度 */
}.item {
  width: 200px;
  text-align: center;
}

说明：

立即学习“前端免费学习笔记（深入）”；

• display: flex：启用 Flexbox 布局
• justify-content: center：水平居中子元素
• align-items: center：垂直居中子元素
• height: 100vh：确保父容器有足够高度（可根据实际调整）

适用场景

这种方法适用于：

• 模态框居中显示
• 登录页面内容居中
• 提示信息或加载动画居中
• 任何需要快速居中的布局场景

基本上就这些，不复杂但很实用。