CSS 盒子垂直居中的两种方法

方法1：

• 父盒子设置上下相同的padding。

该方法无法设置盒子相当于浏览器垂直居中，只适用于父子盒模型。

对于标准流元素，父盒子可以不设置宽高，而让内容自动撑开高度，即是让父盒子的height等于内容（可理解为子盒子）的实际高度（包括height以及内外边距）。对于脱标元素，使用该方法时父盒子必须设置高度且等于内容的实际高度。

方法1一般适用于标准流元素较为方便。对于脱标元素，一般使用方法2。

方法2：

给所需居中的盒子设置以下两条语句：

• 1.设置 top: 50%;

        表示盒子的顶边处于参考盒子（设置了相对定位且离居中盒子最近的父盒子）的border以内高度的一半位置。

• 2.设置 margin-top: -(盒子自身实际高度的一半);

        表示盒子向上移动自身一半高度的距离，使自身居中。

该方法只适用于脱标元素，即子绝父相模式。注意，该方法父盒子必须设置高度，因为子盒子脱标无法撑开父盒子的高度。