css 垂直居中的几种实现方法

在前端开发中，实现页面元素垂直居中的方法多种多样。由于CSS本身并没有提供完整的API支持，我们需要在各种方法中寻求最佳解决方案。今天，我将梳理几种常见的思路和方法。

一、利用position和负边距

一种常见的方法是使用绝对定位，将元素的顶部与居中对齐，然后通过负边距将元素上移其自身高度的一半。这种方法简单易懂，适用于多种场景。其原理可以用下图来可视化说明。

代码实现如下：

```css

.selector {

position: absolute;

top: 50%;

margin-top: -元素自身高度的一半;

}

```

```css

td {

vertical-align: middle;

}

```

三、通用解决方案

针对这个问题，我们可以通过增加一层嵌套元素来解决。内层元素设置top为50%，然后让最内层元素相对于其自身向上提50%。这种方法在支付宝的通用解决方案中也有应用。

以下是相关代码示例：

```html

```

CSS实现如下：

```css

.wrap {

width: 500px;

height: 300px;

border: 3px solid ddd;

margin: 0 auto;

padding: 20px;

display: table; / IE6/7 需要添加 position 属性 /

position: relative;

}

.hack {

display: table-cell;

vertical-align: middle;

position: absolute;

top: 50%;

}

t {

position: relative;

top: -50%;

}

```这种方法的优点是简单易行，但需要注意兼容性问题。对于不同的浏览器和场景，可能需要不同的解决方案。欢迎分享更多更好的方案！