要实现Flexbox居中布局，需设置justify-content: center和align-items: center；前者控制主轴（水平）居中，后者控制交叉轴（垂直）居中，配合容器足够高度即可使子元素水平垂直居中。
在CSS中使用Flexbox实现居中布局，关键在于正确理解align-items和
justify-content</font>两个属性的作用，并合理组合它们。通过这两个属性，可以轻松实现元素在容器中的水平和垂直居中。</p><H3>理解align-items与justify-content的区别</H3><p><strong>justify-content</strong> 控制主轴（main axis）上的对齐方式，通常用于水平方向的对齐（当flex-direction为row时）。常用值包括：</p><ul><li>flex-start：左对齐</li><li>flex-end：右对齐</li><li>center：居中对齐</li><li>space-between：两端对齐，项目间间距相等</li><li>space-around：项目周围空间均匀分布</li></ul><p><strong>align-items</strong> 控制交叉轴（cross axis）上的对齐方式，通常用于垂直方向的对齐（当flex-direction为row时）。常用值包括：</p><ul><li>flex-start：顶部对齐</li><li>flex-end：底部对齐</li><li>center：垂直居中</li><li>stretch：拉伸以填充容器（默认值）</li><li>baseline：基线对齐</li></ul><H3>实现水平垂直居中的标准写法</H3><p>要让子元素在父容器中完全居中，需同时设置主轴和交叉轴的居中对齐：</p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板"><img
src="https://img.php.cn/upload/webcode/000/000/018/178607072210981.jpg" alt="CSS婚礼策划服务机构宣传网站模板" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板">CSS婚礼策划服务机构宣传网站模板</a>
<p>CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。</p>
</div>
<a href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div><font face="Courier New">
.container {<br>
display: flex;<br>
justify-content: center; /* 水平居中 */<br>
align-items: center; /* 垂直居中 */<br>
height: 100vh; /* 确保容器有高度 */<br>
}
</font><p>这种写法适用于单个或多个子元素，只要父容器启用了Flexbox并设置了足够高度，子元素就会精确地出现在正中间。</p><H3>实际应用场景示例</H3><p>常见用途包括登录弹窗、加载提示、卡片内容居中等。例如一个居中的提示框：</p><font face="Courier New">
.modal {<br>
display: flex;<br>
justify-content: center;<br>
align-items: center;<br>
position: fixed;<br>
top: 0; left: 0;<br>
width: 100%;<br>
height: 100%;<br>
background-color: rgba(0,0,0,0.5);<br>
}<br><br>
.message {<br>
background: white;<br>
padding: 20px;<br>
border-radius: 8px;<br>
text-align: center;<br>
}
</font><p>此时.message元素会始终位于视口中央，不受屏幕尺寸影响，适配性强。</p><p>基本上就这些。掌握<code>justify-content控制横向、align-items控制纵向的逻辑，就能灵活应对各种居中需求。不复杂但容易忽略的是确保父容器有明确的高度或占据足够空间，否则居中效果无法体现。 
