如何讓div中的span垂直居中 ----height:100%設定div的高度
阿新 • • 發佈：2018-12-24
如果div中只有一個span一個元素，可以使用line-height。如果div中還有其他元素，可以設定span的css如下：
.span{
position: absolute;
top: 50%;
transform: translateY(-50%);
}
一、div設定百分百高度實現描述
在html佈局中body內第一個div盒子物件設定100%高度height樣式，是無法成功顯示100%高度的。這個是因為body高度預設值為自適應的，所以及時設定body第一個佈局div高度為百分比也是無效的，因為div解析上級高度為0，自然div height 100%實際高度也為0。
瀏覽器根本就不計算內容的高度，除非內容超出了視窗範圍(導致滾動條出現)。或者你給整個頁面設定一個絕對高度。否則，瀏覽器就會簡單的讓內容往下堆砌，頁面的高度根本就無需考慮。
因為頁面並沒有預設的高度值，所以，當你讓一個元素的高度設定為百分比高度時，無法根據獲取父元素的高度，也就無法計算自己的高度。換句話說，父元素的高度只是一個預設值：height: auto;。當你要求瀏覽器根據這樣一個預設值來計算百分比高度時，只能得到undefined的結果。也就是一個null值，瀏覽器不會對這個值有任何的反應。
如果想讓一個元素的百分比css高度height: 100%;起作用，你需要給這個元素的所有父元素的高度設定一個有效值。
div有兩個父元素html和body，如果想讓div的百分比高度起作用的話就要為html和body設定高度
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>成功設定100%高度</title> <style type="text/css"> html,body{ height: 100%; } </style> </head> <body> <div style="height: 100%;background-color: #4d85d1"> 所在div設定高度100%</div> </body> </html>