問題

我們有的時候想垂直居中，我們就寫上vertical-align:middle，但是大多數情況下是不起作用的，你知道是為什麼嘛？

我的發現

vertical-align:middle這個屬性必須和line-height一起使用，就是說它的什麼top、middle、bottom這三個屬性值都是相對於line-height的，分別的含義是，行高上，行高居中，行高底。

而且還要注意的是vertical-align這個屬性是加在子元素上的，並不是加在父元素上的。而且這個子元素必須是行內塊元素才有效。

程式碼示例

css

.father{
    width: 100px;
    height: 100px
 
;
    line-height: 100px;
    background-color: #00B5EE
}
label{
    display: inline-block;
    width: 50px;
    height: 50px;
    vertical-align: middle;
    background-color: #10375E;
}

html

<div class="father">
    <label></label>
</div>

效果：

label原本是行內元素，如果你不設定display:inline-block的話是沒有用的，你可以試一試

總結

1.vertical-align必須對子元素設定，不是對父元素設定
2.必須設定line-height，不然不會起作用
3.vertical-align只對inline-block元素有效

轉自 https://blog.csdn.net/chengqige/article/details/118898166