如何设置边距或填充为父容器高度的百分比？
如何设置边距或填充为父容器高度的百分比？
提问于 2011-02-13 12:49:31
我一直在绞尽脑汁地在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属性时，它会将填充作为父容器高度的百分比，在我们的例子中是base，但上面50%的值是以宽度的百分比计算的。:(
有没有一种方法可以将填充和/或边距设置为高度的百分比，而不使用JavaScript？
回答 3
Stack Overflow用户
发布于 2014-02-02 06:11:31
这里有两个选项来模拟所需的行为。这不是一个通用的解决方案，但在某些情况下可能会有所帮助。这里的垂直间距是基于外部元素的大小计算的，而不是它的父元素，但是这个大小本身可以相对于父元素，这样间距也是相对的。
<div id="outer">
<div id="inner">
content
</div>
</div>第一个选项:使用伪元素，这里的垂直和水平间距是相对于外部的。Demo
#outer::before, #outer::after {
display: block;
content: "";
height: 10%;
}
#inner {
height: 80%;
margin-left: 10%;
margin-right: 10%;
}将水平间距移动到外部元素使其相对于外部元素的父元素。Demo
#outer {
padding-left: 10%;
padding-right: 10%;
}第二种选择:使用绝对定位。Demo
#outer {
position: relative;
}
#inner {
position: absolute;
left: 10%;
right: 10%;
top: 10%;
bottom: 10%;
}Stack Overflow用户
发布于 2016-02-05 11:22:06
要使子元素定位于其父元素的绝对位置，需要在父元素上设置相对位置，在子元素上设置绝对位置。
那么子元素'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>
还有另一个使用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>
你会发现两者都有优势/劣势。
Stack Overflow用户
发布于 2014-05-25 14:44:50
将一行文本居中的另一种方法是：
.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;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/4982480
复制相关文章
相似问题