在頁面設計中，使元素水平居中是比較簡單的事情。但是如何使元素垂直居中呢？其實，我們通過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以上的瀏覽器。