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

我一直在绞尽脑汁用下面的方法在css中创建一个垂直对齐

.base { 背景颜色:绿色; 宽度:200 px; 身高:200 px; 溢出:汽车; 位置:相对; ｝ .vert-align { padding-top: 50%; 高度:50%; ｝ <！——并使用下面的div结构。--> < div class = "基地" > < div class = " vert-align”> 内容在这里 < / div > < / div >

虽然这似乎适用于这种情况，但我惊讶地发现，当我增加或减少基本div的宽度时，垂直对齐会断开。我期望当我设置padding-top属性时，它会将填充作为父容器高度的百分比，这在我们的例子中是基础，但上面的50%值是作为宽度的百分比计算的。：(

是否有一种方法来设置填充和/或边缘作为高度的百分比，而不诉诸于使用JavaScript?

当前回答

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

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

第一种选择:使用伪元素，这里的垂直和水平间距是相对于外层的。演示

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

将水平间距移动到外部元素使其相对于外部元素的父元素。演示

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

第二种选择:使用绝对定位。演示

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

2014-02-01 22:11:30

其他回答

将一行文本居中的另一种方法是:

.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

为了使子元素的位置绝对依赖于它的父元素，你需要设置父元素的相对位置和子元素的绝对位置。

然后在子元素上'top'是相对于父元素的高度。所以你还需要把孩子的身高向上平移50%。

.base { 背景颜色:绿色; 宽度:200 px; 身高:200 px; 溢出:汽车; 位置:相对; ｝ .vert-align { 位置:绝对的; 上图:50%; 转换:翻译(0，-50%); ｝ < div class = "基地" > < div class = " vert-align”> 内容在这里 < / div > < / div >

还有一种解决方案是使用伸缩盒。

.base { 背景颜色:绿色; 宽度:200 px; 身高:200 px; 溢出:汽车; 显示:flex; 对齐项目:中心; ｝ < div class = "基地" > < div class = " vert-align”> 内容在这里 < / div > < / div >

你会发现两者都有优点/缺点。

2016-02-05 03:22:06

50%的填充不会居中你的子元素，它会把它放在中心下方。我觉得你需要25%的缓冲。也许你只是因为你的内容越来越高而没有空间了?你有没有试过设置边距顶部而不是填充顶部?

编辑:没关系，w3schools网站说

以包含元素宽度的百分比为单位指定填充

也许它总是使用宽度?我从没注意过。

你所做的事情可以通过display:table来实现(至少对于现代浏览器是这样)。这里将解释该技术。

2011-02-13 05:18:03

这是一个非常有趣的bug。(在我看来，这是一个bug)很好的发现!

至于如何设置，我推荐Camilo Martin的答案。至于为什么，如果你们不介意的话，我想解释一下。