html5 表格在页面居中 html5表格居中代码

在页面设计中，使元素水平居中是比较简单的事情。但是如何使元素垂直居中呢？其实，我们通过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以上的浏览器。