如何將邊距或填充設置爲父容器高度的百分比？

Question

我一直絞盡腦汁在使用創建CSS中垂直排列如下

.base{ 
    background-color:green; 
    width:200px; 
    height:200px; 
    overflow:auto; 
    position:relative; 
} 

.vert-align{ 
    padding-top:50%; 
    height:50%; 
} 

，並採用以下格結構。

<div class="base"> 
    <div class="vert-align"> 
     Content Here 
    </div> 
</div> 

雖然這似乎對於這種情況下的工作，我感到驚訝的是，當我增加或減少我的基地div的寬度，垂直對齊方式會折斷。我期望在設置padding-top屬性時，它將填充作爲父容器高度的百分比，這在我們的例子中是基礎的，但上面的50％的值是以百分比的形式計算的寬度。 :(

有沒有一種方法來設置填充和/或保證金作爲高度的百分比，而不訴諸使用JavaScript？

Answer 1

我也有這個問題（+1）。我對此非常惱火，必須這樣做是愚蠢的。

修復是的，垂直填充和邊距是相對於寬度，但是top和bottom不是。

所以只需將一個div內的另一個，並在內部DIV，使用類似top:50%（記得position問題，如果它仍然無法正常工作）

Answer 2

50％的填充不會居中你的孩子，將其置於我認爲你真的想要一個25％的填充頂部，也許你剛剛用盡空間，因爲你的內容越來越高？還有你試圖設置margin-top而不是padding-top？

編輯：沒關係，w3schools網站上說的

％指定w的填充百分比包含元素的寬度

所以也許它總是使用寬度？我從未注意到。

你在做什麼可以通過使用display：table來實現（至少對於現代瀏覽器來說）。 The technique is explained here。

Answer 3

這裏有兩個選項來模擬所需要的行爲。不是一般的解決方案，但在某些情況下可能會有幫助。這裏的垂直間距是根據外部元素的大小而不是其父級的大小來計算的，但是這個大小本身可以是相對於父級的，並且這種間距也是相對的。

<div id="outer"> 
    <div id="inner"> 
     content 
    </div> 
</div> 

第一個選項：使用僞元素，這裏垂直和水平間距都是相對於外部的。 Demo

#outer::before, #outer::after { 
    display: block; 
    content: ""; 
    height: 10%; 
} 
#inner { 
    height: 80%; 
    margin-left: 10%; 
    margin-right: 10%; 
} 

移動的水平間距到外元件使得相對於外的父。 Demo

#outer { 
    padding-left: 10%; 
    padding-right: 10%; 
} 

第二種選擇：使用絕對定位。Demo

#outer { 
    position: relative; 
} 
#inner { 
    position: absolute; 
    left: 10%; 
    right: 10%; 
    top: 10%; 
    bottom: 10%; 
} 

Answer 4

居中一行文字另一種方式是：

.parent{ 
    position: relative; 
} 

.child{ 
    position: absolute; 
    top: 50%; 
    line-height: 0; 
} 

或只是

.parent{ 
    overflow: hidden; /* if this ins't here the parent will adopt the 50% margin of the child */ 
} 

.child{ 
    margin-top: 50%; 
    line-height: 0; 
} 

Answer 5

的答案稍有不同的問題：您可以使用vh單位墊元素視窗的中心：

.centerme { 
    margin-top: 50vh; 
    background: red; 
} 

<div class="centerme">middle</div> 

Answer 6

要使子元素與其父元素絕對定位，需要設置父元素的相對位置和子元素的絕對位置。

然後在子元素的'頂部'是相對於父母的高度。因此，您還需要將孩子向上翻譯50％的身高。

.base{ 
 
    background-color: green; 
 
    width: 200px; 
 
    height: 200px; 
 
    overflow: auto; 
 
    position: relative; 
 
} 
 
    
 
.vert-align { 
 
    position: absolute; 
 
    top: 50%; 
 
    transform: translate(0, -50%); 
 
}

<div class="base"> 
 
     <div class="vert-align"> 
 
      Content Here 
 
     </div> 
 
    </div>

有另一種是使用柔性盒的解決方案。

.base{ 
 
    background-color:green; 
 
    width: 200px; 
 
    height: 200px; 
 
    overflow: auto; 
 
    display: flex; 
 
    align-items: center; 
 
}

<div class="base"> 
 
    <div class="vert-align"> 
 
     Content Here 
 
    </div> 
 
</div>

你會發現兩者的優點/ disavantages。