在網(wǎng)站頁(yè)面制作的時(shí)候，很多會(huì)遇到需要做垂直居中的效果，而能做到垂直居中的效果的方式有好多種，今天我想做的這兩種，也非常常用，都可以用于響應(yīng)式的。例如：
 

如圖，白色方塊需要根據(jù)底圖垂直居中，可以用絕對(duì)定位來使它居中，首先最外面的div.comp-profile需要設(shè)置position: relative;白色方塊的div.comp-profile-con設(shè)置如下， 白色方塊即可垂直居中對(duì)齊。

而且絕對(duì)定位必須要設(shè)置高度，而且建議設(shè)置overflow:auto，讓div.comp-profile-con的內(nèi)容超出設(shè)定的高度就要顯示有滾動(dòng)條，否則內(nèi)容多了就會(huì)超出來，不美觀。

 
第二種方式是使用inline-block，這種方式的垂直居中是可以變高度且可以適用于響應(yīng)式的。將需要居中的div.comp-profile-con設(shè)置display: inline-block;變成行內(nèi)塊狀元素，然后設(shè)置vertical-align:middle;來讓它居中對(duì)齊。設(shè)置偽元素：before如下，

用于撐開div.comp-profile這個(gè)盒子，div.comp-profile-con就會(huì)按照div.comp-profile的中心位置垂直居中對(duì)齊。如圖。