不管是初學(xué)CSS還是面試考題熊咽，如何垂直居中一直是個(gè)老生常談的話題窟绷，可能你知道很多方法汇四，但是到底哪一個(gè)最好往往還是模棱兩可接奈，因此將在這里一一探討各種方法。
- 基于絕對(duì)定位的解決方法
- 兼容 IE6+
- 優(yōu)點(diǎn) 兼容性極好
- 缺點(diǎn) 代碼耦合通孽，需要定寬高
代碼如下：
div{
position: absolute;
top: 50%;
left: 50%;
margin-top: -3em;
margin-left: -9em;
width: 18em;
height: 6em;
}
這段代碼通過絕對(duì)定位，將元素偏移到左上50%的地方睁壁，此時(shí)將是垂直居中的狀態(tài)背苦，繼續(xù)設(shè)置其寬高，此時(shí)將以左上角垂直居中的點(diǎn)為擴(kuò)展向右下擴(kuò)張潘明，所以需要通過margin將其左上方向再次偏移寬高的一半行剂，從而達(dá)到垂直居中的效果。
- 基于絕對(duì)定位的解決方法(升級(jí)版)
- 兼容 IE9+
- 優(yōu)點(diǎn) 代碼簡(jiǎn)潔
- 缺點(diǎn) 代碼耦合钳降，需要定寬高
代碼如下：
div{
position: absolute;
top: calc(50% - 3em);
left: calc(50% - 9em);
width: 18em;
height: 6em;
}
通過使用calc屬性厚宰，省去不必要的代碼。
- 基于絕對(duì)定位的解決方法(最終版)
- 兼容 IE9+
- 優(yōu)點(diǎn) 代碼簡(jiǎn)潔,不用定寬高
- 缺點(diǎn) 無法兼容IE8
代碼如下：
div{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
- 基于絕對(duì)定位的解決方法(PC兼容版最佳實(shí)踐)
- 兼容 IE6+
- 優(yōu)點(diǎn) 代碼簡(jiǎn)潔,不用定寬高
- 缺點(diǎn) 需要絕對(duì)定位
代碼如下：
div{
position: absolute;
left: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}
通過使用絕對(duì)定位元素上下左右偏移設(shè)置為0遂填，使其在水平和垂直方向都具有流動(dòng)性铲觉，最后margin將從水平和垂直方向平分剩余空間。
- 基于視口單位的解決方法
- 兼容 IE9+
- 優(yōu)點(diǎn) 代碼簡(jiǎn)潔,不用定寬高吓坚，不用絕對(duì)定位
- 缺點(diǎn) 無法兼容IE8
在css3中撵幽，定義了一些新的單位vh,vw,vmin,vmax,1vh等于視口高度的1%,也就是100vh等于視口的100%，vmin礁击，vmax分別是視口中較小值和較大值盐杂，于是我們有以下代碼：
div{
width: 18em;
margin: 50vh auto 0;
transform: translate(-50%);
}
- 基于Flexbox的解決方案(移動(dòng)端最佳解決方案)
- 兼容 IE9+
- 優(yōu)點(diǎn) 代碼簡(jiǎn)潔,不用定寬高逗载，不用絕對(duì)定位
- 缺點(diǎn) 無法兼容IE8
Flexbox就是針對(duì)這個(gè)需求而被設(shè)計(jì)出來的，所以其便捷與簡(jiǎn)單性簡(jiǎn)直是開辟一個(gè)新天地链烈，代碼如下：
body{
display: flex;
}
div{
margin: auto;
}
看厉斟，就是這么簡(jiǎn)單，只需要一個(gè)容器設(shè)置flex布局强衡，然后設(shè)置margin,它就會(huì)自動(dòng)垂直居中捏膨，當(dāng)然我們也可以不用容器，代碼如下：
div{
display: flex;
align-items: center;
justify-content: center;
width: 18em;
height: 10em;
margin: auto;
}
通過align-items設(shè)置垂直居中食侮，使用justify-content水平居中号涯，最后使用margin均分剩余空間達(dá)到垂直居中效果，實(shí)在是美滋滋锯七。
其它居中方法链快，可自行百度，這里不推薦：
- 行內(nèi)文本垂直居中（近似垂直居中）
- 表格布局法（兼容性還可以）
