Html 如何将边距或填充设置为父容器高度的百分比？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4982480/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to set the margin or padding as percentage of height of parent container?
提问by Ryan
I had been racking my brains over creating a vertical alignment in css using the following
我一直在绞尽脑汁使用以下方法在 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>While this seemed to work for this case, i was surprised that when i increased or decreased the width of my base div, the vertical alignment would snap. I was expecting that when I set the padding-top property, it would take the padding as a percentage of the height of the parent container, which is base in our case, but the above value of 50 percent is calculated as a percentage of the width. :(
虽然这似乎适用于这种情况，但让我感到惊讶的是，当我增加或减少基本 div 的宽度时，垂直对齐会卡住。我期望当我设置 padding-top 属性时，它将填充作为父容器高度的百分比，在我们的例子中是基数，但上面的 50% 值计算为宽度。:(
Is there a way to set the padding and/or margin as a percentage of the height, without resorting to using JavaScript?
有没有办法将填充和/或边距设置为高度的百分比，而无需使用 JavaScript？
采纳答案by Camilo Martin
The fix is that yes, vertical padding and margin are relative to width, but topand bottomaren't.
的修复程序是肯定的，垂直填充和余量是相对于宽度，但top并bottom不是。
So just place a div inside another, and in the inner div, use something like top:50%(remember positionmatters if it still doesn't work)
所以只需将一个 div 放在另一个里面，然后在内部 div 中，使用类似的东西top:50%（position如果它仍然不起作用，请记住很重要）
回答by willoller
An answer to a slightly different question: You can use vhunits to pad elements to the center of the viewport:
一个稍微不同的问题的答案：您可以使用vh单位将元素填充到视口的中心：
.centerme {
margin-top: 50vh;
background: red;
}
<div class="centerme">middle</div>
回答by user
Here are two options to emulate the needed behavior. Not a general solution, but may help in some cases. The vertical spacing here is calculated on the basis of the size of the outer element, not its parent, but this size itself can be relative to the parent and this way the spacing will be relative too.
这里有两个选项可以模拟所需的行为。不是通用的解决方案，但在某些情况下可能会有所帮助。这里的垂直间距是根据外部元素的大小计算的，而不是它的父元素，但是这个大小本身可以是相对于父元素的，这样间距也是相对的。
<div id="outer">
<div id="inner">
content
</div>
</div>
First option: use pseudo-elements, here vertical and horizontal spacing are relative to the outer. Demo
第一种选择：使用伪元素，这里垂直和水平间距是相对于外部的。演示
#outer::before, #outer::after {
display: block;
content: "";
height: 10%;
}
#inner {
height: 80%;
margin-left: 10%;
margin-right: 10%;
}
Moving the horizontal spacing to the outer element makes it relative to the parent of the outer. Demo
将水平间距移动到外部元素使其相对于外部元素的父元素。演示
#outer {
padding-left: 10%;
padding-right: 10%;
}
Second option: use absolute positioning. Demo
第二种选择：使用绝对定位。演示
#outer {
position: relative;
}
#inner {
position: absolute;
left: 10%;
right: 10%;
top: 10%;
bottom: 10%;
}
回答by alain
To make the child element positioned absolutely from its parent element you need to set relative position on the parent element AND absolute position on the child element.
要使子元素与其父元素绝对定位，您需要在父元素上设置相对位置和在子元素上设置绝对位置。
Then on the child element 'top' is relative to the height of the parent. So you also need to 'translate' upward the child 50% of its own height.
然后在子元素上，'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>There is another a solution using flex box.
还有另一个使用 flex box 的解决方案。
.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>You will find advantages/disavantages for both.
你会发现两者的优点/缺点。
回答by James T
This can be achieved with the writing-modeproperty. If you set an element's writing-modeto a vertical writing mode, such as vertical-lr, its descendants' percentage values for padding and margin, in both dimensions, become relative to height instead of width.
这可以通过writing-mode属性来实现。如果您将元素设置writing-mode为垂直书写模式，例如vertical-lr，其后代的填充和边距百分比值在两个维度上都将相对于高度而不是宽度。
From the spec:
从规范：
. . . percentages on the margin and padding properties, which are always calculated with respect to the containing block width in CSS2.1, are calculated with respect to the inline sizeof the containing block in CSS3.
. . . margin 和 padding 属性的百分比，在 CSS2.1 中总是根据包含块的宽度计算，在 CSS3 中是根据包含块的行内大小计算的。
The definition of inline size:
内联大小的定义：
A measurement in the inline dimension: refers to the physical width (horizontal dimension) in horizontal writing modes, and to the physical height (vertical dimension) in vertical writing modes.
行内尺寸的测量：指水平书写模式下的物理宽度（水平尺寸），垂直书写模式下的物理高度（垂直尺寸）。
Example, with a resizable element, where horizontal margins are relative to width and vertical margins are relative to height.
例如，使用可调整大小的元素，其中水平边距相对于宽度，垂直边距相对于高度。
.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>Using a vertical writing mode can be particularly useful in circumstances where you want the aspect ratio of an element to remain constant, but want its size to scale in correlation to its height instead of width.
在您希望元素的纵横比保持不变，但希望其大小与高度而不是宽度相关联的情况下，使用垂直书写模式特别有用。
回答by rawiro
Other way to center one line text is:
将一行文本居中的另一种方法是：
.parent{
position: relative;
}
.child{
position: absolute;
top: 50%;
line-height: 0;
}
or just
要不就
.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;
}
回答by SpliFF
A 50% padding wont center your child, it will place it below the center. I think you really want a padding-top of 25%. Maybe you're just running out of space as your content gets taller? Also have you tried setting the margin-top instead of padding-top?
50% 的填充不会让您的孩子居中，而是将其置于中心下方。我认为你真的想要一个 25% 的填充顶部。也许随着您的内容越来越高，您的空间即将用完？你也试过设置 margin-top 而不是 padding-top 吗？
EDIT: Nevermind, the w3schools site says
编辑：没关系，w3schools 网站说
% Specifies the padding in percent of the width of the containing element
% 以包含元素宽度的百分比指定填充
So maybe it always uses width? I'd never noticed.
所以也许它总是使用宽度？我从来没有注意到。
What you are doing can be acheived using display:table though (at least for modern browsers). The technique is explained here.
您正在做的事情可以使用 display:table 来实现（至少对于现代浏览器而言）。此处解释了该技术。
回答by WoodrowShigeru
This is a very interesting bug. (In my opinion, it is a bug anyway) Nice find!
这是一个非常有趣的错误。（在我看来，无论如何这是一个错误）很好的发现！
Regarding howto set it, I would recommend Camilo Martin's answer. But as to why, I'd like to explain this a bit if you guys don't mind.
关于如何设置它，我会推荐 Camilo Martin 的答案。但至于为什么，如果你们不介意的话，我想解释一下。
In the CSS specsI found:
在我发现的 CSS 规范中：
'padding'
Percentages:refer to width of containing block
'padding'
百分比：指包含块的宽度
… which is weird, but okay.
......这很奇怪，但没关系。
So, with a parent width: 210pxand a child padding-top: 50%, I get a calculated/computed value of padding-top: 96.5px– which is not the expected 105px.
因此，对于父母width: 210px和孩子padding-top: 50%，我得到了一个计算/计算值padding-top: 96.5px- 这不是预期的105px。
That is because in Windows (I'm not sure about other OSs), the size of common scrollbars is per default 17px × 100%(or 100% × 17pxfor horizontal bars). Those 17pxare substracted beforecalculating the 50%, hence 50% of 193px = 96.5px.
那是因为在 Windows 中（我不确定其他操作系统），常用滚动条的大小是默认的17px × 100%（或100% × 17px水平条）。那些17px被中减去之前计算50%的，因此50% of 193px = 96.5px。
