flex布局是实现html5垂直居中对齐的首选方法，通过设置父容器display: flex，结合align-items: center实现垂直居中，justify-content: center实现水平居中，兼容性良好且代码简洁。
在HTML5中实现垂直居中对齐，Flex布局是最简单、最灵活的方式之一。它不仅能轻松实现单行文本的上下居中，还能处理复杂结构的垂直和水平双居中。
使用Flex实现垂直居中
通过设置父容器为Flex布局，利用 align-items 和 justify-content 属性，可以快速实现子元素的垂直居中。
- align-items: center：控制交叉轴（通常是垂直方向）上的对齐。
- justify-content: center：控制主轴（通常是水平方向）上的对齐。
示例代码：
<div class="container">
<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="/ai/797" title="有道智云AI开放平台"><img
src="https://img.php.cn/upload/ai_manual/000/000/000/175679968792605.jpg" alt="有道智云AI开放平台" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/ai/797" title="有道智云AI开放平台">有道智云AI开放平台</a>
<p>有道智云AI开放平台</p>
</div>
<a href="/ai/797" title="有道智云AI开放平台" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div>
</div>
<p><style>
.container {
display: flex;
align-items: center;
justify-content: center;
height: 100vh; /<em> 让容器占满视口高度 </em>/
margin: 0;
}
</style></p>仅需垂直居中？调整 justify-content 即可
如果你只需要上下居中而不需要水平居中，可以只保留 align-items: center，并设置 justify-content 为 flex-start、center 或其他值按需对齐。
例如：
.container {
display: flex;
align-items: center; /* 垂直居中 */
justify-content: flex-start; /* 水平左对齐 */
height: 300px;
}
兼容性与注意事项
Flex布局在现代浏览器中支持良好（IE10及以上）。若需兼容更老版本浏览器，可考虑使用 table-cell 或 绝对定位 + transform 方案，但Flex仍是推荐首选。
确保父容器有明确的高度，否则 align-items: center 可能无效。
基本上就这些，用Flex实现HTML5中的垂直居中既简洁又高效。
