垂直居中有幾種實(shí)現(xiàn)方式
- 父元素上下padding設(shè)置成一樣大小
代碼
2.絕對(duì)定位
position: absolute;
left: 50%;
top:50%;
margin-left: -自身寬/2;
margin-top: -自身高/2; /* 或者transform: translate(50%, 50%) //自身寬高50% */
3.vertical-align: middle; // 行內(nèi)元素和表格
在使用到vertical-align: middle;的時(shí)候，我發(fā)現(xiàn)不起作用。經(jīng)過(guò)看視頻和百度，才發(fā)現(xiàn)我的理解是有問(wèn)題的，不只是單單給想要的元素上加上displsy: inline-block; vertical-align: middle;，而是要明白，這個(gè)vertical-align: middle是以該屬性定義行內(nèi)元素的基線相對(duì)于該元素所在行的基線的垂直對(duì)齊。有點(diǎn)繞，研究之后發(fā)現(xiàn)，其實(shí)說(shuō)的就是 它其實(shí)要與另一個(gè)元素對(duì)齊，是以另一個(gè)元素來(lái)做參照物的，兩個(gè)元素都設(shè)置了vertical-align: middle;才可以實(shí)現(xiàn)在同一個(gè)容器中垂直居中對(duì)齊。例如下面的示例，假設(shè)有兩個(gè)行內(nèi)元素a和b，a和b都是img，當(dāng)a加了一個(gè)vertical-align:middle樣式之后，b的底部（基線）就會(huì)對(duì)齊a的中間位置，如圖：
title
如果a和b都加了一個(gè)vertical-align:middle樣式，那么就互相對(duì)齊了對(duì)方的中間位置，也就是它們?cè)诖怪狈较蛏系闹芯€對(duì)齊了，如圖：
title
那么現(xiàn)在我想要一個(gè)div元素在另一個(gè)div父容器下實(shí)現(xiàn)垂直居中，那么我就可以在同一個(gè)父容器中添加一個(gè)看不見(jiàn)的元素，高度設(shè)置為100%，那么我這個(gè)div就可以實(shí)現(xiàn)在父容器中垂直居中了。
title
那么實(shí)現(xiàn)時(shí)，就可以利用偽類:before來(lái)做一個(gè)看不見(jiàn)的參照物元素，
.ct:before {
content: "";
height: 100%;
display: inline-block;
vertical-align: middle;
}
4.table-cell
使用table-cell垂直居中，需要在父容器上設(shè)置display: table-cell; vertical-align: middle;
代碼
