居中一个元素 - CSS：层叠样式表 | MDN

HTML: Markup language
CSS: Styling language
JavaScript: Scripting language
Web APIs: Programming interfaces
Learn web development
Get to know MDN better
此页面由社区从英文翻译而来。了解更多并加入 MDN Web Docs 社区。
View in English Always switch to English
在这份指南中你将了解到把一个盒子居中放置在另一个之中的方法。在弹性盒子模型（flexbox）出现之前，要做到同时垂直与水平居中是很困难的，而现在利用盒子对齐属性（Box Alignment）就很直截了当了。
把一个项目同时垂直与水平居中地放置在另一个盒子中。
要将一个盒子居中放置在另一个之中，我们需要让作为容器的盒子变成伸缩容器。再将 align-items 设置为 center 来实现块向轴（block axis）上的居中，并把 justify-content 设置为 center 来实现行向轴（inline axis）上的居中。
将来我们可能不需要将父容器设置为伸缩容器就可以居中元素，因为此处使用的“盒子对齐”属性也被指定为适用于区块布局。然而，当前在区块布局上对盒子对齐属性的支持仍然是有限的，因此目前使用伸缩盒子来实现居中还是最可靠的方法。
此页面最后更新于 2025年11月10日，由 MDN 贡献者更新。
本内容的部分版权归 mozilla.org 贡献者所有，©1998–2026。内容依据知识共享许可协议提供。