CSS水平垂直居中方法这么多，总有一款适合你
原文中文，约9900字，阅读约需24分钟。
📝
内容提要
本文介绍了11种CSS实现水平垂直居中的方法，推荐使用flex布局、相对/绝对定位+transform、table-cell和Grid布局。
❓
Q&A
CSS中有哪些方法可以实现元素的水平垂直居中？
CSS中可以通过flex布局、绝对/相对定位+transform、table-cell、Grid布局等11种方法实现元素的水平垂直居中。
为什么推荐使用flex布局进行居中？
flex布局适用广泛，兼容性好，且对子元素的宽高没有限制，是实现居中的优选方案。
绝对定位+transform方案适合什么情况？
该方案适用于未知宽高或动态变化尺寸的元素居中，且性能较好，因为transform不会影响布局流。
Grid布局与flex布局有什么区别？
Grid布局是现代布局模式，支持复杂排列，但在移动端的支持性不如flex布局好，flex布局更为通用。
使用line-height方案时需要注意什么？
line-height方案仅适用于单行文本，且需要知道父元素的高度，行高需与高度相等才能实现垂直居中。
在选择居中方案时应该考虑哪些因素？
选择居中方案时应考虑通用性、易用性和兼容性，优先选择对子元素宽高没有限制的对齐方式。
🏷️
