CSS水平垂直居中方法这么多，总有一款适合你
内容提要
本文介绍了11种CSS实现水平垂直居中的方法，推荐使用flex布局、相对/绝对定位+transform、table-cell和Grid布局。
延伸解读
选择居中方案的核心原则
文章强调，选择水平垂直居中方案时，应优先考虑对子元素宽高没有限制的方法。因为这类方案更灵活，能适应未知或动态尺寸的元素。推荐顺序为flex > 相对/绝对定位+transform > table-cell > grid。其中flex和transform方案兼容性好且不依赖固定尺寸，table-cell适合高兼容场景，grid则移动端支持稍弱。
不同方案的适用场景与限制
flex布局适用最广，对子元素宽高无要求；绝对/相对定位+transform适合未知宽高或动态尺寸元素；table-cell适合兼容性要求高的场景；grid适合复杂排列但移动端支持不如flex。绝对定位+margin:auto、负margin、calc均需子元素固定宽高，限制较大。line-height和伪元素方案仅适用于单行内联块级元素对齐。
不推荐使用的方案及原因
文章明确指出，writing-mode和table布局不推荐使用。writing-mode实现垂直居中需要额外后代元素，层级较多且方式偏门；table布局虽然简单且不关注子元素尺寸，但DOM层级过多，不够优雅。因此在实际开发中应优先选择更简洁、通用的方案。
Q&A
CSS中有哪些方法可以实现元素的水平垂直居中？
CSS中可以通过flex布局、绝对/相对定位+transform、table-cell、Grid布局等11种方法实现元素的水平垂直居中。
为什么推荐使用flex布局进行居中？
flex布局适用广泛，兼容性好，且对子元素的宽高没有限制，是实现居中的优选方案。
绝对定位+transform方案适合什么情况？
该方案适用于未知宽高或动态变化尺寸的元素居中，且性能较好，因为transform不会影响布局流。
Grid布局与flex布局有什么区别？
Grid布局是现代布局模式，支持复杂排列，但在移动端的支持性不如flex布局好，flex布局更为通用。
使用line-height方案时需要注意什么？
line-height方案仅适用于单行文本，且需要知道父元素的高度，行高需与高度相等才能实现垂直居中。
在选择居中方案时应该考虑哪些因素？
选择居中方案时应考虑通用性、易用性和兼容性，优先选择对子元素宽高没有限制的对齐方式。
