元素垂直水平居中方案

以下展示了6种常见的方法来实现子元素在父元素中的垂直水平居中，包括宽高已知和未知的情况。每种方法都有其适用场景和优缺点。

方法1: Flexbox（推荐）
B元素

使用Flexbox布局，只需三行代码即可实现居中。

#A { display: flex; justify-content: center; align-items: center; }

适用：子盒子宽高已知或未知，现代浏览器（IE10+）

方法2: Grid布局
B元素

使用CSS Grid布局，一行代码实现居中。

#A { display: grid; place-items: center; }

适用：子盒子宽高已知或未知，现代浏览器（IE不支持）

方法3: 绝对定位 + 负边距
B元素

使用绝对定位和负边距实现居中，需要知道子元素尺寸。

#A { position: relative; } #B { position: absolute; top: 50%; left: 50%; width: 100px; height: 50px; margin-left: -50px; margin-top: -25px; }

适用：子盒子宽高已知，所有浏览器

方法4: 绝对定位 + Transform
B元素

使用绝对定位和CSS Transform实现居中，不需要知道子元素尺寸。

#A { position: relative; } #B { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

适用：子盒子宽高已知或未知，现代浏览器（IE9+）

方法5: 绝对定位 + margin:auto
B元素

使用绝对定位和margin:auto实现居中，需要知道子元素尺寸。

#A { position: relative; } #B { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100px; height: 50px; margin: auto; }

适用：子盒子宽高已知，所有浏览器

方法6: display:flex + margin:auto
B元素

使用display:flex + margin:auto实现居中。

#A { display: flex; } #B { margin: auto; }

适用：子盒子宽高已知或未知，所有浏览器