CSS 5種垂直置中方法

說到垂直置中一直是網頁設計師的痛，早期解決方法沒有那麼多，最常見到的就是height = line-height這種方式，可是這方式彈性很低，如果遇到多行文字就無法使用。

然而隨著CSS的演進，越來越多種垂直置中的方法，這邊就介紹幾種實用性高的垂直置中方法。

條件

這篇文章所介紹的垂直置中方式，都不會使用絕對值(px)，大多可以運用在各種環境，但實際上還是需要配合CSS的特性去做選用。

這次用鳴人的圖片來做介紹，這張圖片是用背景的方式載入。

//sass code
.naruto
	background-image: image-url("narutoR.png")
	background-color: orange
	background-repeat: no-repeat
	width: (image-width("narutoR.png") / 2)
	height: (image-height("narutoR.png") / 2)
	+background-size(cover)

外框的部分就直接加入height: 350px的屬性。

%box
	height: 350px

方法一：table

此table不是真table，這是IE8以上才支援的CSS語法，將div的屬性轉成table，再套用垂直置中的方式來完成。

優點：概念簡單、支援度高(IE8+)

缺點：html結構較多層、有table的特性

.table
	@extend %box
	display: table
	width: 100%
.table-cell
	display: table-cell
	vertical-align: middle
.naruto
	margin: 0 auto

方法二：display: inline-block

vertical-align: middle可以做垂直置中，但是限制只能使用在inline及inline-block上，而且還有諸多的限制…，但是透過一點小技巧，vertical-align: middle會是一個非常實用的置中方式(目前也常把這方法套用在專案上)。

重點在於透過偽元素製作一個垂直100%的物件，而需要置中的元素也轉換為inline-block，並且套用vertical-align: middle。

優點：相容性不錯，如果要ie7則必須自己手動插入偽元素的部分。

缺點：必須轉成inline-block

.box-wrap
	@extend %box
	text-align: center
	&:before
		content: ""
		display: inline-block
		height: 100%
		vertical-align: middle
.naruto
	display: inline-block
	vertical-align: middle

什麼是vertical-align：http://css-tricks.com/what-is-vertical-align/

方法三：

這方法類似於margin: 0 auto的水平置中，但套用在垂直的元素上，只要將內元素設定absolute並將上下左右的距離皆設定為0，再補上margin: auto就大功告成了，但這方法只能用在內元素有明確的寬與高。

優點：相容性高

缺點：內元素必須有明確的寬高值

.box-wrap
	@extend %box
	position: relative
.naruto
	position: absolute
	top: 0
	left: 0
	bottom: 0
	right: 0
	margin: auto

方法四：translateY(- 50%)

以前常會用一種方式做垂直置中top: 50%; margin-top: -(元素高 / 2);，先用top往下推50%的距離，再利用margin-top拉回元素的一半高度，這方式雖然很好用，但是必須用在元素有明確高度上。

而這邊所介紹是相同的道理，但是是用transform: translateY(- 50%)將元素垂直向上50%的距離，這50%則是元素的高度，且語法都集中在元素上。

優點：如果不提到ie就沒有缺點

缺點：如果提到ie就是缺點(ie9+)

.naruto
	position: relative
	top: 50%
	margin: 0 auto
	+transform(translateY(- 50%))

方法五：flex

近幾年W3C針對CSS的layout提出了新的語法 flex，經過多番的波折目前也差不多定案，所以主流的瀏覽器幾乎都支援 flex。

透過Compass(1.0+)，許多前輟詞都可以省略。

.flex-wrap
	+display-flex //flex
	+flex-wrap(wrap) //flex外框
	+align-items(center) //水平置中
	+justify-content(center) //垂直置中

優點：很潮

缺點：如果提到ie就是缺點(全部)、建議熟悉flex概念

前年的鐵人賽我有介紹過flex，也可以參考前年的文章，flex看似簡單，但似乎沒有那麼容易…。