寫頁面時不免會遇到水平垂直居中的問題,總結一下最近使用的方法。css
<div id="div1"> <img src="img/bg1.png" alt=""> </div>
對應的CSS的樣式爲:html
#div1 { width: 500px; height: 200px; background-color: #0c0c0c; display: table-cell; vertical-align: middle; text-align: center; }
<div id="div4"> <img src="img/bg1.png" alt=""> </div>
對應的CSS的樣式爲flex
#div4 { width: 500px; height: 300px; position: relative; background-color: #eee; } #div4 img { position: absolute; left: 38%; top: 35%; }
主要是要注意的問題是要本身定位距離左、上的距離;code
display: flex;
,而後子div自由浮動<div id="div5"> <img src="img/bg1.png" alt=""> </div>
對應的樣式:htm
#div5 { width: 400px; height: 300px; display: flex; background-color: #0c0c0c; } #div5 img { width: 116px; height: 101px; max-width: 100%; max-height: 100%; margin: auto; }