如何将边距或填充设置为父容器高度的百分比？

164

我一直绞尽脑汁在使用创建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？

来源

2011-02-13 Ryan

167

我也有这个问题（+1）。我对此非常恼火，必须这样做是愚蠢的。

修复是的，垂直填充和边距是相对于宽度，但是top和bottom不是。

所以只需将一个div内的另一个，并在内部DIV，使用类似top:50%（记得position问题，如果它仍然无法正常工作）

来源

2012-04-04 20:03:31

`top` works非常适合基于浏览器/窗口高度调整大小。如何在div下面有div？你怎样才能“清除”第二个div，使其处于被“顶部：50％”向下移动的div下？ – Federico 2014-11-19 17:48:43

学会新东西。不知道垂直填充和边距是否与之前的宽度有关。谢谢。 – shaosh 2014-12-01 23:00:08

50％的填充不会居中你的孩子，将其置于我认为你真的想要一个25％的填充顶部，也许你刚刚用尽空间，因为你的内容越来越高？还有你试图设置margin-top而不是padding-top？

编辑：没关系，w3schools网站上说的

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

所以也许它总是使用宽度？我从未注意到。

你在做什么可以通过使用display：table来实现（至少对于现代浏览器来说）。 The technique is explained here。

来源

2011-02-13 05:18:03 SpliFF

谢谢斯普利夫。我知道我的50％不会将div的内容集中在一起。我实际上只有一行文本需要垂直居中。虽然感谢了很多链接！ – Ryan 2011-02-13 11:31:05

如果它只是一行文本，你考虑使用一个可笑的大'行高'，即，使行高200px？ – SpliFF 2011-02-14 00:40:15

@Ryan为垂直居中文本，请参阅http://stackoverflow.com/questions/8865458/how-to-align-text-vertical-center-in-div-with-css – user 2014-02-01 21:21:55

这里有两个选项来模拟所需要的行为。不是一般的解决方案，但在某些情况下可能会有帮助。这里的垂直间距是根据外部元素的大小而不是其父级的大小来计算的，但是这个大小本身可以是相对于父级的，并且这种间距也是相对的。

<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%; 
}

来源

2014-02-01 22:11:30 user

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

.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; 
}

来源

2014-05-25 06:44:50 rawiro

的答案稍有不同的问题：您可以使用vh单位垫元素视窗的中心：

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

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

来源

2015-10-08 18:47:46 willoller

要使子元素与其父元素绝对定位，需要设置父元素的相对位置和子元素的绝对位置。

然后在子元素的'顶部'是相对于父母的高度。因此，您还需要将孩子向上翻译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。

来源

2016-02-05 03:22:06 alain

如何将边距或填充设置为父容器高度的百分比？

回答

相关问题