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

Question

我使用以下方法在css中创建垂直对齐方式

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

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

并使用以下div结构.

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

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

虽然这似乎适用于这种情况,但我感到惊讶的是,当我增加或减少我的基础div的宽度时,垂直对齐会突然.我期待当我设置padding-top属性时,它将填充占父容器高度的百分比,这在我们的情况下是基数,但是上面的50%的值是以百分比计算的.宽度.:(

有没有办法将填充和/或边距设置为高度的百分比,而无需使用JavaScript？

Answer 1

的修复程序是肯定的,垂直填充和余量是相对于宽度,但top并bottom 不是.

所以只需将div放在另一个内部,并在内部div中使用类似的东西top:50%(position如果它仍然不起作用,请记住问题)

Answer 2

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

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

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

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

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

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，其后代的填充和边距的百分比值在两个维度上都将相对于高度而不是宽度。

从规范：

. . . margin 和 padding 属性的百分比，在 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>

在您希望元素的纵横比保持不变，但希望其大小与高度而不是宽度相关联的情况下，使用垂直书写模式特别有用。