2017-04-16 226 views
0

我有以下的HTML代碼:填充頂出奇怪的行爲

p.error { 
 
    color: red; 
 
    padding: 5%; 
 
    margin-left: 20%; 
 
    margin-right: 20%; 
 
    font-size: 300%; 
 
    height: 100%; 
 
    box-shadow: 3px 3px 20px 3px #545454; 
 
    text-align: center; 
 
    background-color: #f1f1f1; 
 
} 
 

 
div.alert { 
 
    padding-top: 50%; 
 
}
<div class="alert"> 
 
    <p class="error">Error: Permission denied!</p> 
 
</div>

我的哪個瀏覽器(谷歌瀏覽器版57.0.2987.133)編譯成這樣: ![Screenshot 我終於拿到了它通過以下方式垂直居中div

div.alert{ 
    padding-top: 22.5%; 
} 

通過進一步測試,我發現瀏覽器使用寬度而不是高度來填充填充頂部

我的問題:爲什麼瀏覽器編譯HTML代碼是這樣,我怎麼能得到它的垂直居中div使用50%的?

+1

這裏只是迂腐:它不被稱爲「編譯」HTML代碼 - 它是渲染。 – SamJakob

+0

另外,爲什麼div的高度設置爲100%?編輯:不要擔心,誤讀 – SamJakob

回答

0

要垂直居中,您需要使用絕對位置top: 50%; left: 50%; transform: translate(-50%,-50%);將其置於死區。

p.error { 
 
    color: red; 
 
    padding: 5%; 
 
    margin-left: 20%; 
 
    margin-right: 20%; 
 
    font-size: 300%; 
 
    height: 100%; 
 
    box-shadow: 3px 3px 20px 3px #545454; 
 
    text-align: center; 
 
    background-color: #f1f1f1; 
 
} 
 

 
div.alert { 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50%, -50%); 
 
    width: 100%; 
 
}
<div class="alert"> 
 
    <p class="error">Error: Permission denied!</p> 
 
</div>

您還可以使用display: flex; justify-content: center; align-items: center;父居中孩子的死點。

body { 
 
    margin: 0; 
 
} 
 
p.error { 
 
    color: red; 
 
    padding: 5%; 
 
    margin-left: 20%; 
 
    margin-right: 20%; 
 
    font-size: 300%; 
 
    height: 100%; 
 
    box-shadow: 3px 3px 20px 3px #545454; 
 
    text-align: center; 
 
    background-color: #f1f1f1; 
 
} 
 

 
div.alert { 
 
    min-height: 100vh; 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
}
<div class="alert"> 
 
    <p class="error">Error: Permission denied!</p> 
 
</div>

+1

再次,只是迂腐:這也將水平居中元素 - OP沒有要求。在這種情況下,我認爲這是他想要的。 – SamJakob

+0

謝謝,但是當我使用* padding-top時,瀏覽器爲什麼不垂直居中:50%*?對我來說,這似乎應該工作得很好。 –

+0

@SamMearns是的,你是對的,這是我想要的。 –

1

爲中心,我建議你參考這個CSS-技巧文章: https://css-tricks.com/centering-css-complete-guide/

我都用這個,但是我已經跳過了父元素部分,因爲父母是身體:

.parent { 
    position: relative; 
} 
.child { 
    position: absolute; 
    top: 50%; 
    transform: translateY(-50%); 
} 

.alert { 
 
    position: absolute; 
 
    top: 50%; 
 
    transform: translateY(-50%); 
 
    /* for Safari */ 
 
    -webkit-transform: translateY(-50%); 
 
} 
 

 
p.error{ 
 
    color: red; 
 
    padding: 5%; 
 
    margin-left: 20%; 
 
    margin-right: 20%; 
 
    font-size: 300%; 
 
    box-shadow: 3px 3px 20px 3px #545454; 
 
    text-align: center; 
 
    background-color: #f1f1f1; 
 
    height: 100%; 
 
}
<div class="alert"> 
 
    <p class="error">Error: Permission denied!</p> 
 
</div>

注:我只垂直居中的元素,而不是水平太。

2

填充百分比指的是元素的寬度。這是W3 CSS盒模型規範的一部分:

http://www.w3.org/TR/CSS2/box.html#padding-properties

您將無法參考高度與填充百分比。它將始終指寬度。

+0

你的意思是百分比總是相對於寬度而不是元素的高度? – SamJakob

+1

是的,那是對的:P. –