垂直居中方法一

當(dāng)一個(gè)設(shè)置了定位的元素所有的偏移為0且margin為auto時(shí)將水平，垂直都居中，且父元素自身的高度可動(dòng)態(tài)變化。

垂直居中方法二

如果是單行文本，行高如塊的高度一樣時(shí)將居中，只一行，行高和元素一樣高，居中。

line-height: 600px;
height: 600px;

只可以是文字等一些行內(nèi)標(biāo)簽，圖片不行

垂直居中方法三

讓元素相對(duì)父元素定位，偏移左50%，上50%，把自身向左移半個(gè)寬度，向上移半個(gè)高度，同時(shí)完成了水平與垂直方向的居中

垂直居中方法四

vertical-align屬性，相對(duì)兄弟級(jí)行高（line-height）來定位,實(shí)現(xiàn)垂直居中。

垂直居中方法五

使用div構(gòu)造一個(gè)表格，使用表格特性居中

垂直居中方法六

在某些時(shí)候需要將小圖片與文字對(duì)齊，可以使用對(duì)齊的屬性absmiddle（絕對(duì)居中）

垂直居中方法七

CSS3中可以使用transform移動(dòng)元素自身的寬度與高度實(shí)現(xiàn)居中。
transform用于設(shè)置或檢索對(duì)象的轉(zhuǎn)換，參數(shù)translate()指定對(duì)象的2D translation（2D平移）。第一個(gè)參數(shù)對(duì)應(yīng)X軸，第二個(gè)參數(shù)對(duì)應(yīng)Y軸。如果第二個(gè)參數(shù)未提供，則默認(rèn)值為0。

垂直居中方法八

通過display:flex實(shí)現(xiàn)CSS垂直居中的方法是給父元素display:flex;而子元素align-self:center;
這個(gè)跟CSS水平居中的原理是一樣的，只是在flex-direction上有所差別，一個(gè)是row(默認(rèn)值)，另外一個(gè)是column。

垂直方法九

具體方式是為父元素添加偽元素:before，使得子元素實(shí)現(xiàn)垂直居中。