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

我一直在绞尽脑汁使用以下命令在CSS中创建垂直对齐方式

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

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

<!-- and used the following div structure. -->

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

尽管这似乎适用于这种情况，但令我感到惊讶的是，当我增加或减小基本div的宽度时，垂直对齐方式会对齐。我期望当我设置padding-top属性时，会将填充值作为父容器高度的百分比（在我们的示例中为基数），但是上述50％的值是按宽度。:(

有没有一种方法可以将填充和/或边距设置为高度的百分比，而无需使用JavaScript？

解决方法是，是的，垂直填充和边距与宽度有关，但top与宽度bottom 无关。

因此，只需将div放置在另一个div内，然后在内部div中使用类似的内容top:50%（请记住，position如果仍然不起作用，则很重要）

一个稍微不同的问题的答案：您可以使用vh单位将元素填充到视口的中心：

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

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

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

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

为了使子元素绝对位于其父元素的位置，您需要在父元素上设置相对位置，在子元素上设置绝对位置。

然后在子元素上，“ top”相对于父元素的高度。因此，您还需要向上“平移”孩子身高的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>

您会发现两者的优点/缺点。

这可以通过该writing-mode属性来实现。如果将元素设置writing-mode为垂直书写模式（例如）vertical-lr，则其后代在两个维度上的填充和边距百分比值将相对于高度而不是宽度。

从规格：

。。。在CSS2.1中始终根据包含块的宽度计算的边距和填充属性百分比是在CSS3中相对于包含块的内联大小计算的。

内联大小的定义：

内联尺寸的度量：是指水平书写模式下的物理宽度（水平尺寸），以及垂直书写模式下的物理高度（垂直尺寸）。

例如，对于一个可调整大小的元素，其中水平边距相对于宽度，垂直边距相对于高度。

.resize {
  width: 400px;
  height: 200px;
  resize: both;
  overflow: hidden;
}

.outer {
  height: 100%;
  background-color: red;
}

.middle {
  writing-mode: vertical-lr;
  margin: 0 10%;
  width: 80%;
  height: 100%;
  background-color: yellow;
}

.inner {
  writing-mode: horizontal-tb;
  margin: 10% 0;
  width: 100%;
  height: 80%;
  background-color: blue;
}

<div class="resize">
  <div class="outer">
    <div class="middle">
      <div class="inner"></div>
    </div>
  </div>
</div>

在您希望元素的长宽比保持恒定，但要使其尺寸与高度而不是宽度成比例的情况下，使用垂直书写模式特别有用。

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

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

50％的填充不会使您的孩子居中，它将放置在中心下方。我认为您真的希望填充率达到25％。也许随着内容的增加，您的空间即将用完？您是否也尝试过设置margin-top而不是padding-top？

编辑：没关系，w3schools网站说

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

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

可以使用display：table来实现您正在做的事情（至少对于现代浏览器而言）。该技术在这里进行说明。

这是一个非常有趣的错误。（依我看，这仍然是一个错误）很高兴找到！

关于如何设置呢，我会建议卡米洛·马丁的答案。但是关于原因，如果你们不介意的话，我想解释一下。

在CSS规范中，我发现：

“填充”
百分比： 指包含块的宽度

……这很奇怪，但是还可以。

因此，在有父母width: 210px和孩子的情况下padding-top: 50%，我得到的计算/计算值是padding-top: 96.5px–这不是预期的105px。

这是因为在Windows（我不确定其他操作系统）中，默认情况下17px × 100%（默认100% × 17px是水平条）通用滚动条的大小是。那些17px被中减去之前计算50%的，因此50% of 193px = 96.5px。