爲什麼這個填充不是中心內容？

Question

我知道填充是你的邊框和你最內層之間的空間。在下面的CSS中，如果我將底部填充設置爲40px，則內容不在div中居中。爲什麼？

div { 
 
    height:40px; 
 
    width:40px; 
 
    color:blue; 
 
    background-color:red; 
 
    border:10px solid blue; 
 
    padding: 40px 40px 40px 40px; 
 
}

<div>hello</div>

Answer 1

內容方面還是40px高（因爲這是你所指定的高度）和文本在了頂部開始。

Answer 2

它不會因爲你的元素設置height，只是將其刪除：

div { 
 
    width:40px; 
 
    color:blue; 
 
    background-color:red; 
 
    border:10px solid blue; 
 
    padding: 40px 40px 40px 40px; 
 
}

<div>hello</div>

Answer 3

如果添加line-height和text-align:center將垂直center它和水平

div { 
 
    height:40px; 
 
    width:40px; 
 
    color:blue; 
 
    background-color:red; 
 
    border:10px solid blue; 
 
    padding: 40px 40px 40px 40px; 
 
    line-height: 40px; 
 
    text-align:center; 
 
}

<div>hello</div>