CSS3 垂直居中實現方法
CSS裡實現水平居中非常容易，inline元素用text-align:center;，block元素用margin:auto;就行了。但要實現垂直居中確是一大難題。本篇收集了一些已知的方案，整理出來，以備將來取用。
• Flex彈性盒子
• absolute絕對定位
• vh視口單位
Flex彈性盒子
Flex彈性盒子應該是解決垂直居中的最佳方案，隨著IE10的逐漸沒落，惹人煩的相容性問題正逐漸被克服。用法很簡單，給需要垂直居中的元素的父容器設定display:flex，並指定align-items: center;就搞定了：
body {
…
display: flex;
align-items: center;
}
main {
…
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
<body 我們想將main垂直居中，只需給它的父元素body設display:flex;和align-items: center;即可。main裡有一個div和一個p，想將這兩個元素在main裡垂直居中，同樣只需給它們的父元素main設display:flex;和align-items: center;。另外justify-content和flex-direction用於調整這兩個子元素水平居中的排列順序。（如果對彈性盒子及其屬性不熟悉，可以參照CSS3 flex盒子語法介紹，也可以點例子頁面試一下）
absolute絕對定位
一種很常見的方法是用絕對定位配合負值margin。思路是設成absolute後，指定top和left為50%，將元素的左上角定位點放到頁面正中心。然後用負值margin一半的元素寬高度將元素拉回頁面正中心：
main {
position: absolute;
width: 18em;
height: 10em;
top: 50%;
left: 50%;
margin-top: -9em;
margin-left: -5em;
…
}但缺點是你需要事先指定元素的width和height，否則無法給負margin設值，顯得不夠靈活。其實不必固定元素的寬高，改用translate()位移來替代負margin，實現將元素拉回頁面正中心：（如果對變形元素不熟，可以參照CSS3 transform介紹）
main {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
…
}
<main>
<div>用absolute實現</div>
<p>垂直居中</p>
</main>用絕對定位absolute讓需要垂直居中的元素脫離文件流，指定top和left各50%將元素左上角定位點設到頁面正中心。然後用translate()各負50%，將元素拉回頁面正中心。思路和負margin是一致的，優勢是不必固定元素的寬高了。缺點是absolute絕對定位威力太大，要考慮是否會對頁面佈局造成影響。
vh視口單位
上例中translate()將元素回拉的前提是，absolute絕對定位來設top和left各50%。但如果看到absolute絕對定位就覺得不舒服，可以改成vh視口單位來設元素左上角的定位點。
vh就是視口高度，vw是視口寬度。例如1vh表示視口高度的1%。
vmin是視口寬高的小值，例如vh
main {
width: 9em;
margin: 50vh auto 0;
transform: translateY(-50%);
…
}
<main>
<div>用vh實現</div>
<p>垂直居中</p>
</main>因為去掉了absolute，失去了包裹性，所以需要指定width大小。margin-top設為50vh，表示視口高度的50%位置。然後用translateY(-50%)將元素拉上去。之所以用translateY因為水平位置已經指定margin為auto實現了居中，所以水平位置不用回拉
更多資源可以訪問：去轉盤；或者加QQ群一起討論學習js，css等技術（QQ群：512245829）