初级项目中如何使用CSS实现登录框居中_CSS弹性盒子布局-css教程-PHP中文网

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

P粉602998670

发布： 2025-10-30 15:00:01

原创

452人浏览过

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

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

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

使用Flexbox实现登录框居中

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

FaceSwapper

FaceSwapper是一款AI在线换脸工具，可以让用户在照片和视频中无缝交换面孔。

960

查看详情

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);
}

登录后复制