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

Question

我一直在绞尽脑汁地使用以下代码在 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？

Answer 1

解决方法是，垂直内边距和边距与宽度相关，但顶部和底部不是。

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

Answer 2

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

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

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

Answer 3

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

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

Answer 4

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

那么子元素的“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>

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

Answer 5

这可以通过 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>

当您希望元素的纵横比保持不变，但希望其大小根据其高度而不是宽度进行缩放时，使用垂直书写模式特别有用。

Answer 6

将一行文本居中的其他方法是：

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

这是一个非常有趣的错误。 （在我看来，无论如何，这是一个错误）很好的发现！

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

---

在CSS规范中我发现：

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

……这很奇怪，但没关系。

因此，使用父 width: 210px 和子 padding-top: 50%，我得到 padding-top: 96.5px< 的计算/计算值/code> – 这不是预期的 105px。

这是因为在 Windows 中（我不确定其他操作系统），常见滚动条的大小默认为 17px × 100% （或水平滚动条的 100% × 17px酒吧）。在计算 50% 之前，先减去这些 17px，因此 193px 的 50% = 96.5px。

Answer 8

带有空行的 CSS 网格

这种方法可能只有在您已经在相关容器中使用 css-grid 时才有意义，但是如果您是这样，您可以创建一个空行，其百分比（因为它是一行）将是身高的百分比。

.wrapper
{
  border: 2px solid red;
  width: 400px;
  height: 200px;
  
  display: grid;
  grid-template-rows: 10% 1fr;
}

.child
{
  background: orange;
  width: 50px;
  height: 50px;
  
  grid-area: 2/1;
}

<div class="wrapper">
  <div class="child">
  </div>
</div>

Answer 9

50% 的填充不会使您的孩子居中，而是将其置于中心下方。我想你确实想要 25% 的 padding-top。也许随着您的内容变高，您的空间不足了？您还尝试过设置 margin-top 而不是 padding-top 吗？

编辑：没关系，w3schools 网站说

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

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

您正在做的事情可以使用 display:table 来实现（至少对于现代浏览器）。 此处解释了该技术。

Answer 10

您可以使用grid或inline-grid设置相对填充，如下所示：

.el {
  display: inline-grid;
  /* 25% 75% columns */
  grid-template-rows: 25fr 75fr;
  
  /* Insert :before into first row so text is forced into 2nd row. */
  &:before {
    content: "";
    display: block;
    grid-row: 1;
    background: red;
  }
}

<div class="el">
Some text<br/>
Some text<br/>
Some text<br/>
Some text<br/>
</el>