html表格垂直居中的CSS代码,使用3行CSS代码使任何元素垂直居中

在页面设计中，使元素水平居中是比较简单的事情。但是如何使元素垂直居中呢？其实，我们通过3行CSS代码(不包括添加浏览器厂商所需的代码)就可以使任何元素垂直居中。秘诀就是使用transform: translateY属性，使用这种方法，哪怕是你不知道元素的高度，也可以这个元素垂直居中。

CSS的transform属性通常是用来旋转或缩放元素用的，但是使用它的translateY属性，我们可以制作元素垂直居中的效果。一般我们在制作元素垂直居中效果的时候，使用的都是absolute定位，或者是设置一个元素的line-height，但是这些方法都需要预先知道元素的高度，或者是一些单行文本的情况。

下面来看看实现的CSS代码(没有包括浏览器厂商的前缀代码)：

.element {

position: relative;

top: 50%;

transform: translateY(-50%);

}

我们需要的就是这三句代码。它和绝对定位技术有一些类似，但是我们没有在元素上设置高度，或者在它的父元素上使用position属性。这种方法可以在所有的现代浏览器中正常工作，包括IE9。

下面演示了几个例子：

这是一个垂直居中的文本！

上面的例子的代码如下：

.valign-image img ,.valign-text p{

position: relative;

top: 50%;

-webkit-transform: translateY(-50%);

-ms-transform: translateY(-50%);

transform: translateY(-50%);

}

section.valign-image,section.valign-text{

display: block;

max-width: 500px;

background: #433669;

margin: 0 auto 1em;

height: 140px;

border-radius: .5em;

color: white;

text-align: center;

}

.valign-image img,.valign-text p{padding: 1em;}

为了使代码的使用更加简单，减少重复工作，我们可以将它写成Sass mixin，或者一个placeholder selector，将浏览器厂商的前缀在这些代码中补全：

/* Mixin */

@mixin vertical-align {

position: relative;

top: 50%;

-webkit-transform: translateY(-50%);

-ms-transform: translateY(-50%);

transform: translateY(-50%);

}

.element p {

@include vertical-align;

}

/* Placeholder selector */

%vertical-align {

position: relative;

top: 50%;

-webkit-transform: translateY(-50%);

-ms-transform: translateY(-50%);

transform: translateY(-50%);

}

.element p {

@extend %vertical-align;

}

扩展

其实，要使一个元素垂直居中的方法有很多，我们可以使用display:table-cell，calc，甚至是绝对定位的方法来使元素垂直居中。看下面的例子：

使用display:table-cell方法使元素垂直居中：

.center-aligned {

display: table;

background: hsl(120, 100%, 97%);

width: 100%;

}

.center-core {

display: table-cell;

text-align: center;

vertical-align: middle;

}

.center-core img { width: 33%; height: auto; }

使用calc()方法使元素垂直居中：

.element{

height: 250px;

width: 250px;

position: relative;

left: calc(50% – 125px);

}

使用绝对定位的方法使元素垂直居中：

.element{

position: relative;

width: 400px;

height: 400px;

background: #6699cc;

}

.element .sub-element{

position: absolute;

top: 0;

left: 0;

right: 0;

bottom: 0;

margin: auto;

width: 200px;

height: 200px;

background: #fff;

}

小结

使元素垂直居中的方法很多，我们要选择一种适合我们的方法来使用。本文介绍了一种使用transform: translateY来使元素垂直居中的方法，这种方法可以兼容IE9以上的浏览器。