如何在其位置保留绝对定位的元素？

Question

当父级的高度发生变化时，如何保持一个绝对定位的元素（在顶部垂直居中：0;底部：0;以及margin：auto;）的位置？

元素是一个完全以垂直制表符为中心的img。 当用户单击垂直选项卡时，它会展开以显示更多信息，这会将完美居中的图像移动到现在在展开选项卡中的垂直居中。

Answer 1

是的，它可以通过css3实现。 请尝试这个，你将解决你的伎俩。

<div class="responsive-container">
    <div class="dummy"></div>

    <div class="img-container">
        <img src="http://placehold.it/150x150" alt="" />
    </div>
</div>

这是顶部的css

.responsive-container {
    position: relative;
    width: 100%;
    border: 1px solid black;
}

.dummy {
    padding-top: 100%; /* forces 1:1 aspect ratio */
}

.img-container {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;

    text-align:center; /* Align center inline elements */
    font: 0/0 a;
}

.img-container:before {
    content: ' ';
    display: inline-block;
    vertical-align: middle;
    height: 100%;
}

.img-container img {
    vertical-align: middle;
    display: inline-block;
}

请尝试让我知道。

Answer 2

如果在这种情况下可以从css中删除top，left，bottom，right参数 - 元素将保留在原位。

这些参数使其绝对相对于窗口定位，但是移除它们将元素放置在原来的位置。 然后设置宽度，高度和边距将完成剩下的工作。

另一种选择是使父元素位置：相对，绝对或固定。 然后将相对于孩子的位置进行计算。

Answer 3

如果你不介意一点JavaScript，这将做你想要的。 img最初位于该部分的垂直中间，但是当该部分的大小发生变化时，它将保持在原位。

 document.querySelector('.abs').dataset.top = document.querySelector('.abs').offsetTop; document.getElementById('more').onclick = function() { var img = document.querySelector('.abs'); if (document.getElementById('more').checked) { img.style.top = img.dataset.top+'px'; img.style.margin = '0'; } else { img.style.top = ''; img.style.margin = ''; } }; 

 section {position: relative;} #more ~ p {display: none;} #more:checked ~ p {display: block;} .abs { position: absolute; left: 50%; top: 0; bottom: 0; height: 40px; margin: auto 0; } 

 <section> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> <input id="more" type="checkbox"><label for="more"> Show more</label> <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor</p> <img src="https://placehold.it/150x40" alt="150x40" class="abs"> </section> 

Answer 4

你试试这个。

 body,html { height:100%; margin:0; padding:0; } .second-div { width:30%; height:50%; background:red; position:absolute; top:0; bottom:0; margin:auto; } .first { width:60%; height:200px; position:relative; background:pink; } 

 <div class="first"> <div class="second-div"><div> </div> 

Answer 5

使用此选项指定任何对象的确切位置。

<style>
Position: absolute;
Top: 0px;
Left: 0px;
</style>

这会将对象锁定在左上角。

然后用它来移动它：

<style> Transform: Translate(1px, 1px); </style>

这只是示例，修改它以适合您的格式（px，％，vh / vw或您使用的任何东西）:-)