本人前端小白，正在做一個小程序開發的項目，css樣式調整搞的頭都大了。關于垂直居中，已嘗試了文中的幾個垂直居中css樣式設置，已成功解決我的問題，故轉載來備份下。
CSS垂直居中11種實現方法分別如下：
html代碼：
<div id="box"> <div id="child">我是測試DIV</div></div></pre>css代碼：#box { width: 300px; height: 300px; background: #ddd; position: relative;} #child { width: 150px; height: 100px; background: orange; position: absolute; top: 50%; margin: -50px 0 0 0; line-height: 100px;}運行結果如下：
這個方法兼容性不錯，但是有一個小缺點：必須提前知道被居中塊級元素的尺寸，否則無法準確實現垂直居中。
html代碼：
<div id="child"> 我是一串很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長的文本 </div></pre>css代碼：#box { width: 300px; height: 300px; background: #ddd; position: relative;} #child { background: #93BC49; position: absolute; top: 50%; transform: translate(0, -50%);}運行結果如下：
這種方法有一個非常明顯的好處就是不必提前知道被居中元素的尺寸了，因為transform中translate偏移的百分比就是相對于元素自身的尺寸而言的。
html代碼：
<div id="box"> <div id="child">我也是個測試DIV</div></div></pre>css代碼：#box { width: 300px; height: 300px; background: #ddd; position: relative;} #child { width: 50%; height: 30%; background: pink; position: absolute; top: 50%; margin: -15% 0 0 0;}運行結果如下：
這種方式的原理實質上和前兩種相同。補充的一點是：margin的取值也可以是百分比，這時這個值規定了該元素基于父元素尺寸的百分比，可以根據實際的使用場景來決定是用具體的數值還是用百分比。
html代碼：