修正是，是的，垂直填充和边距是相对于宽度，但顶部和底部不是。

所以只要把一个div放在另一个div里面，在里面的div中，使用像top:50%这样的东西(记住位置很重要，如果它仍然不起作用)

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

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

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

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

修正是，是的，垂直填充和边距是相对于宽度，但顶部和底部不是。

所以只要把一个div放在另一个div里面，在里面的div中，使用像top: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 >

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

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

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