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

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

使用Flexbox实现登录框居中

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

百度文心百中

百度大模型语义搜索体验中心

22

查看详情

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

关键属性说明

理解以下几个Flexbox属性有助于掌握居中技巧：

• display: flex;：开启弹性布局，使子元素成为弹性项目。
• justify-content: center;：控制主轴方向（默认为水平）的对齐方式，实现水平居中。
• align-items: center;：控制交叉轴方向（垂直）的对齐方式，实现垂直居中。
• min-height: 100vh;：确保容器至少等于视口高度，避免内容少时无法居中。

注意事项与常见问题

在实际使用中，注意以下几点可避免常见错误：

• 确保父容器有明确的高度（如100vh），否则align-items可能无效。
• 登录框自身不要设置浮动或绝对定位，除非特殊需要。
• 若页面已有其他布局结构，可将.container作为body的直接子元素，避免嵌套影响。

基本上就这些。用Flexbox实现居中既直观又可靠，适合大多数初级到中级项目场景。