Question

Here是我设置的jsFiddle。

父元素和子元素的高度将是不确定的（意味着它将在之后改变）并且子元素的位置必须是绝对的。

如何将子元素从父级中心垂直偏移五个像素？

HTML：

<div class="parent">
    <div class="child"></div>
</div>

CSS：

.parent{
    position:relative;
    margin: 10% auto;
    background:lightgray;
    height:50px;/*parent's height will change after*/
    width:200px;
}
.parent .child{
    position:absolute; /* needs to be absolutely position */
    top:0;
    bottom:0;
    margin:auto;
    width:100%;
    height:20px;/*child's height will change after*/
    background:darkgray;
}

Answer 1

偏移5px，其中??

喜欢这个----＆gt; Updated Fiddle

或

喜欢这个----＆gt; Updated Fiddle

Answer 2

如果我理解正确，那么你想要将孩子垂直偏移五个像素。我不确定这是否意味着元素应该从父级的中间向上或向下移动，但here是向上移动的示例，而here是用于向下移动的元素。

这是我添加到孩子的CSS中以移动它的代码：

top:50%;
margin-top:-15px;

同时删除该孩子的当前top和bottom声明。

我们将它从父母的顶部设置为50％，然后从其顶部偏移量中减去其高度的一半。我们向该偏移量添加（或减去）5个像素以进一步偏移它。

对于可变高度，请使用此CSS（将其向上移动五个像素）：

top:-5px;
bottom:0;
margin:auto;

Example

Answer 3

使用border-top
请参阅我的Fiddle此处

顶部：0;底部：0;和保证金：自动;当父元素和子元素的高度“不确定”时，子元素可以对齐;
边框顶：10px的;可以使子元素偏移。

也许你会解决你的问题

如何将子元素从其父元素的中心垂直偏移？

3 个答案: