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和伪元素方案可作为单行内联块级元素对齐的备选方案。
➡️
