第一種垂直居中方法
利用vertical-align：middle進行垂直方向上的居中對齊，此方法需要滿足的條件：
下方是完整代碼，可以新建一個HTML文件進行測試(綠色的盒子)：
<html><head><title>導航條</title><meta charset="utf-8" /></head><style>*{ margin:0; padding:0;}.div1{ height:200px; background:yellow; /*行高等于容器高度*/ line-height:200px;}.div2{ width:100px; height:100px; background:green; /*行內塊級元素*/ display:inline-block; /*中線和父元素基線上方出對其，參考字母"x"*/ vertical-align:middle;}.div3{ width:100px; height:100px; background:red; display:inline-block;} </style><body><div class="div1">xxxxxxxxxxx <div class="div2" > </div> <div class="div3" > </div></div></body></html>第一種方法結束。
第二種垂直居中方法
這種方法比較暴力，利用定位解決：
下方是完整代碼，可以新建一個HTML文件進行測試(綠色的盒子)：
<html><head><title>導航條</title><meta charset="utf-8" /></head><style>*{ margin:0; padding:0;}.div1{ height:200px; background:yellow; /*相對定位開啟*/ position:relative;}.div2{ width:100px; height:100px; background:green; /*絕對定位*/ position:absolute; /*可以右對齊*/ right:0px; /*先向下移動父元素的50%，此時子元素的頂部與父元素的中線對齊了*/ top:50%; /*再向上移動自身高度"height"的一半，此時子元素的中線和父元素的中線對齊了*/ margin-top:-50px} </style><body><div class="div1"> <div class="div2" > </div></div></body></html>第二種方法結束。
總結
上面兩種方法的特點都是讓子元素的中線和父元素的中線對齊。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
