初级项目中如何使用CSS实现登录框居中_CSS弹性盒子布局

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

初级项目中如何使用CSS实现登录框居中_CSS弹性盒子布局

2025-10-30

浏览次数：次

返回列表

使用Flexbox可轻松实现登录框水平垂直居中：将父容器设为flex布局，通过justify-content和align-items属性分别实现水平与垂直居中，配合min-height:100vh确保容器高度占满视口，从而稳定居中子元素.login-box。

初级项目中如何使用css实现登录框居中_css弹性盒子布局

在初级项目中，让登录框在页面中水平垂直居中是常见的需求。使用CSS弹性盒子布局（Flexbox）是最简单、高效的方式之一。它无需计算宽高，兼容性好，代码简洁。

使用Flexbox实现登录框居中

核心思路是：将父容器设置为弹性盒子，并通过主轴和交叉轴的对齐属性让子元素（即登录框）居中显示。

万相营造

阿里妈妈推出的AI电商营销工具

168 查看详情万相营造

HTML结构示例：

<div class="container">
  <div class="login-box">
    <h3>登录</h3>
    <form>
      <input type="text" placeholder="用户名" />
      <input type="password" placeholder="密码" />
      <button type="submit">登录</button>
    </form>
  </div>
</div>

CSS样式设置：

.container {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center;     /* 垂直居中 */
  min-height: 100vh;       /* 容器占满整个视口高度 */
  margin: 0;
  background-color: #f5f5f5;
}

.login-box {
  width: 300px;
  padding: 20px;
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}