CSS水平垂直居中方法这么多，总有一款适合你
💡
原文中文，约9900字，阅读约需24分钟。
📝
内容提要
本文介绍了11种CSS实现水平垂直居中的方法，推荐使用flex布局、相对/绝对定位+transform、table-cell和Grid布局。
🎯
关键要点
- 前言部分强调了布局在CSS开发中的重要性，特别是元素的水平垂直居中。
- 介绍了11种CSS实现水平垂直居中的方法，推荐使用flex布局、相对/绝对定位+transform、table-cell和Grid布局。
- 方案一：flex布局，分为两种版本，适用广泛，兼容性好。
- 方案二：绝对/相对定位+transform，适用于未知宽高或动态变化尺寸的元素。
- 方案三：table-cell方案，适用于兼容性要求高的场景。
- 方案四：table布局，简单易懂，但DOM层级较多。
- 方案五：Grid布局，现代布局模式，支持复杂排列，但移动端支持不如flex好。
- 方案六：writing-mode，间接实现垂直居中，但需要额外的后代元素。
- 方案七：绝对定位+margin:auto，要求子元素有固定宽高。
- 方案八：绝对定位+负margin，需手动计算偏移值，限制较大。
- 方案九：绝对定位+calc，结合calc()计算偏移量，需知道子元素尺寸。
- 方案十：line-height方案，适用于单行文本，需知道父元素高度。
- 方案十一：伪元素方案，通过创建伪元素实现多个行内块级元素的垂直居中。
- 选择方案时，优先考虑对子元素宽高没有限制的对齐方式，推荐顺序为flex > 相对/绝对定位+transform > table-cell > grid。
- line-height和伪元素方案可作为单行内联块级元素对齐的备选方案。
❓
延伸问答
CSS中有哪些方法可以实现元素的水平垂直居中？
CSS中可以通过flex布局、绝对/相对定位+transform、table-cell、Grid布局等11种方法实现元素的水平垂直居中。
为什么推荐使用flex布局进行居中？
flex布局适用广泛，兼容性好，且对子元素的宽高没有限制，是实现居中的优选方案。
绝对定位+transform方案适合什么情况？
该方案适用于未知宽高或动态变化尺寸的元素居中，且性能较好，因为transform不会影响布局流。
Grid布局与flex布局有什么区别？
Grid布局是现代布局模式，支持复杂排列，但在移动端的支持性不如flex布局好，flex布局更为通用。
使用line-height方案时需要注意什么？
line-height方案仅适用于单行文本，且需要知道父元素的高度，行高需与高度相等才能实现垂直居中。
在选择居中方案时应该考虑哪些因素？
选择居中方案时应考虑通用性、易用性和兼容性，优先选择对子元素宽高没有限制的对齐方式。
➡️
