《css 揭祕》 之垂直居中的實現

最近看了 Lea Verou 的 《css揭祕》一書，讓我對本身的 css學習產生了深深的懷疑。這本書真是太棒了，裏面涉及到不少優雅又有趣的效果實現，真的是很是棒。若是你有時間，十分建議你去看看。

元素的垂直居中是一個前端er沒法忽視的問題，由於在網頁中，它的應用實在太多了。網上也有不少關於如何實現垂直居中的問題以及應對方法。好比利用table,或是改變元素的 display;之前也寫過一份關於垂直居中實現的總結，此次看了這個書，它有新的更加優雅的實現。讓我抑制不住要把它記錄在這裏。

它採用的是 css 的變形屬性 translate() 和 flexbox 佈局。首先說說translate()。

之前的定位方案

先看看早期的垂直居中方案，它要求元素有固定的寬高；

main {
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -3em; /* 6/2 = 3 */
	margin-left: -9em; /* 18/2 = 9 */
	width: 18em;
	height: 6em;
}

這段代碼在幹嗎呢？它實際作了如下幾件事：先把這個元素的左上角放置在視口（或最近的定位屬性的祖先元素）的正中心，而後利用負外邊距把它向左、向上移動（移動距離爲自身寬高的通常），從而把元素的正中心放置在視口的正中心。藉助強大的calc元素，代碼能夠節省成：

main {
	position: absolute;
	top: calc(50% - 3em);
	left: calc(50% - 9em);
	width: 18em;
	height: 6em;
}

很顯然，這個方法最大的侷限在於它要求元素的寬高是固定的，在一般狀況下，對那些須要居中的元素來講，其尺寸每每是由其內容決定的。若是能找到一個屬性的百分比值以元素自身的的寬高做爲解析基準，那問題就解決了。雖然絕大多數 css 屬性，百分比都是以其父元素的尺寸爲基準進行解析的，可是總有些例外。好比變形屬性：translate()；

當咱們在translate()變形函數中使用百分比時，是以這個元素自身的寬度和高度爲基準進行換算和移動的，而這正是咱們須要的。這樣能夠完全解除對固定尺寸的依賴;

main {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

這個方法也有須要注意的地方：

• 有時不能使用絕對定位，由於它對整個佈局的影響太過影響；
• 若是須要居中的元素已經在高度上超過視口，那它的頂部會被視口裁切掉；

假設咱們不想使用絕對定位， 仍然能夠採用 translate() 技巧來把這個元素以其自身寬高的一半爲距離進行移動； 可是在缺乏 left 和 top 的狀況下， 如何把這個元素的左上角放置在容器的正中心呢？像下面這樣

main {
	width: 18em;
	padding: 1em 1.5em;
	margin: 50vh auto 0;
	transform: translateY(-50%);
}

可是這種只適用於在是視口中居中的場景；

基於flex-box的解決方案

只需寫兩行聲明：先給待居中元素設置 display:flex,再給這個元素自身設置咱們再熟悉不過的margin:auto;

body {
	display: flex;
  	min-height:1Lea Verou00vh;
	margin:0;
}
main {
	margin: auto;
}

當咱們使用 flexbox 時，margin：auto 不只會在水平方向上將元素居中，垂直方向上也是如此；咱們甚至不須要只當任何寬度，這個居中元素分配的寬度等於 max-content; flexbox 的另外一個好處是，它還能夠將匿名容器垂直居中，以下：

<main>Center me, please!</main>

咱們先給這個 main 元素指定一個固定的尺寸，而後藉助 flexbox 規範中的 align-items 和 justify-content 屬性，咱們可讓它內部的文本也實現居中；

main {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 18em;
	height: 10em;
}

這樣就輕鬆實現了垂直居中的效果。