我一直在绞尽脑汁用下面的方法在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?
当前回答
这可以通过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>
如果您希望元素的纵横比保持不变，但希望其大小与高度相关，而不是与宽度相关，那么使用垂直书写模式特别有用。
其他回答
将一行文本居中的另一种方法是:
.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;
}
这里有两个选项来模拟所需的行为。不是一般的解决方案，但在某些情况下可能有帮助。这里的垂直间距是根据外部元素的大小计算的，而不是它的父元素，但是这个大小本身可以相对于父元素，这样间距也是相对的。
<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>
如果您希望元素的纵横比保持不变，但希望其大小与高度相关，而不是与宽度相关，那么使用垂直书写模式特别有用。
这是一个非常有趣的bug。(在我看来，这是一个bug)很好的发现!
至于如何设置，我推荐Camilo Martin的答案。至于为什么，如果你们不介意的话，我想解释一下。
在CSS规范中，我发现:
“填充” 百分比:指包含块的宽度
这很奇怪，不过没关系。
因此，父宽度:210px，子padding-top: 50%，我得到padding-top的计算值:96.5px -这不是预期的105px。
这是因为在Windows中(我不确定其他操作系统)，普通滚动条的大小默认为17px × 100%(或100% × 17px的水平条)。这些17px在计算50%之前被减去，因此193px的50% = 96.5px。
一个稍微不同的问题的答案:你可以使用vh单位来填充元素到视口的中心:
.centerme {
margin-top: 50vh;
background: red;
}
<div class="centerme">middle</div>
