之前看到很多人一直都问这个问题，不过当时我没当一回事，因为在 CSS 中要垂直居中，多数是在有高度的情况下，或者容器高度不定的情况下才用，看上去比较舒服，而且实现的方法也不少。不过最近有人问了几个例子。现在就把我经验拿出来分享一下，希望大家鼓鼓掌。
在网页布局设计中，垂直居中是一个常见的需求，尤其是在创建响应式和自适应设计时。本文将介绍五种使用 `div` 和 `css` 实现垂直居中的方法，以帮助开发者解决这一问题。
方法一：表格布局
这种方法利用 `display: table`、`display: table-row` 和 `display: table-cell` 来模拟表格布局，并通过 `vertical-align: middle` 属性实现垂直居中。这种方式适用于高度未知的情况，但不支持 IE6 和 IE7。
CSS 示例：
```css
div#wrapper {
display: table;
width: 500px;
height: 500px;
background-color: #c00;
}
div#row {
display: table-row;
}
div#cell {
display: table-cell;
vertical-align: middle;
}
```
HTML 示例：
```html
<div id="wrapper">
<div id="row">
<div id="cell">If you want to sell sugar water for the rest of my life or want a chance to change the world</div>
</div>
</div>
```
方法二：绝对定位与负边距
此方法通过绝对定位元素并设置 `top: 50%`，然后用负 `margin-top` 等于内容高度的一半来实现垂直居中。但这种方法需要预先知道内容的高度。
CSS 示例：
```css
div#wrapper {
position: relative;
width: 500px;
height: 500px;
background-color: #c00;
}
div#content {
position: absolute;
top: 50%;
left: 0;
width: 400px;
height: 300px;
margin-top: -150px;
background-color: pink;
}
```
HTML 示例：
```html
<div id="wrapper">
<div id="content"></div>
</div>
```
方法三：额外元素与负外边距
这种方法与方法二类似，但使用额外的元素来调整负外边距。同样需要预先知道内容的高度。
CSS 示例：
```css
.wrap {
height: 500px;
width: 500px;
background-color: pink;
}
.additional {
height: 50%;
margin-bottom: -120px;
}
#content {
height: 240px;
width: 70%;
background-color: #000;
}
```
HTML 示例：
```html
<div class="wrap">
<div class="additional"></div>
<div id="content"></div>
</div>
```
方法四：绝对定位与自动外边距
这种方法通过将 `div` 的 `position` 设为 `absolute`，并设置 `top: 0; bottom: 0; left: 0; right: 0;`，再配合 `margin: auto;`，使得元素在水平和垂直方向上自动居中。但不支持 IE6 和 IE7。
CSS 示例：
```css
#content {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
height: 240px;
width: 70%;
background-color: #000;
}
```
HTML 示例：
```html
<div id="content">Content here</div>
```
方法五：单行文本居中
对于单行文本，只需将 `line-height` 设置为元素的高度即可实现垂直居中。
这些方法各有优缺点，如兼容性、是否需要预先知道内容高度等。开发者可以根据实际项目需求选择适合的方法。例如，如果需要兼容旧版浏览器，可能需要避免使用 `display: table` 或 `position: absolute` 的方法。而如果内容高度不固定，表格布局和负边距方法可能会更合适。熟悉这些方法有助于提升页面布局设计的灵活性和效率。
