freeCodeCamp.org
·
如何在CSS中居中任何元素：7种始终有效的方法
💡
原文英文，约2100词，阅读约需8分钟。
📝
内容提要
CSS居中元素的方法主要分为水平和垂直居中。常用方法包括：使用`text-align: center;`居中文本，`margin: 0 auto;`水平居中块元素，Flexbox和Grid可实现完美的水平和垂直居中，绝对定位结合变换也能居中，适用于模态框等。理解不同方法的适用场景是掌握CSS居中的关键。
🎯
关键要点
- CSS居中元素的方法分为水平和垂直居中。
- 使用text-align: center;可以居中文本，但不能居中块元素。
- margin: 0 auto;可以水平居中块元素，但不适用于垂直居中。
- Flexbox可以实现完美的水平和垂直居中，适用于动态内容。
- CSS Grid是最简单的居中方法，通过place-items: center;可以同时水平和垂直居中。
- 绝对定位结合transform可以在不使用Flexbox或Grid的情况下居中元素。
- 使用line-height属性可以垂直居中单行文本，但不适用于多行文本。
- table-cell方法适用于旧版CSS布局和电子邮件模板，可以实现内容的水平和垂直居中。
❓
延伸问答
CSS中如何水平居中一个块元素？
可以使用margin: 0 auto;来水平居中块元素，但前提是该元素必须有定义的宽度。
使用Flexbox如何实现元素的水平和垂直居中？
将容器设置为display: flex;，并使用justify-content: center;和align-items: center;来实现水平和垂直居中。
CSS Grid如何简化元素的居中操作？
通过设置容器为display: grid;并使用place-items: center;，可以轻松实现元素的水平和垂直居中。
如何使用绝对定位和变换来居中元素？
将元素设置为position: absolute;，并使用top: 50%;和left: 50%;，然后结合transform: translate(-50%, -50%);来居中。
如何使用line-height属性垂直居中单行文本？
将line-height设置为与容器高度相同的值，可以使单行文本在容器中垂直居中。
table-cell方法在CSS中有什么应用场景？
table-cell方法适用于旧版CSS布局和电子邮件模板，可以实现内容的水平和垂直居中。
➡️
