为什么这个填充不是中心内容？

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>