Here是我设置的一个jsFiddle。
父元素和子元素的高度将是不确定的（意味着它将在之后更改），并且子元素的位置必须是绝对的。
我怎样才能将子元素从父元素的中心垂直偏移5个像素？
超文本：
<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;
}
4条答案
按热度按时间szqfcxe21#
偏移量5 px在哪里？？
像这样----〉Updated Fiddle
或
像这样----〉Updated Fiddle
mitkmikd2#
如果我没理解错的话，那么你想让子元素垂直偏移5个像素，我不确定这意味着元素应该从父元素的中间向上还是向下移动，但是here是一个向上移动的例子，here是一个向下移动的例子。
下面是我添加到child的CSS中以将其上移的代码：
此外，还应删除子对象的当前
top和bottom声明。我们将其设置为距离父对象顶部50%，然后从其顶部居中偏移量减去其高度的一半，并在该偏移量上加上（或减去）5个像素以进一步偏移。
对于可变高度，请使用以下CSS（这会将其上移5个像素）：
Example .
ojsjcaue3#
使用
border-top在此查看我的Fiddle
也许你能解决你的问题
x6yk4ghg4#
考虑到元素居中，您只需添加
垂直偏移div，或
以使其水平偏移。