使用3行CSS代码使任何元素垂直居中

05-12 次

标签 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;
}