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

Question

How can I keep an absolutely positioned element (that has been vertically centered with top: 0; bottom: 0; and margin: auto;) in its place when the height of its parent is changed?

The element is an img that is perfectly centered on a vertical tab. When the user clicks on the vertical tab it expands to show more information, this moves the perfectly centered image to now be vertically centered in the expanded tab.

Answer 1

Yes,it can be possible by css3. Please try this and you will get resolve your trick.

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

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

This is css for the top

.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;
}

Please try and let me know.

Answer 2

If it is possible in this case, remove the top, left, bottom, right parameters from css - and the element will stay in its place.

Those parameters make it positioned absolutely relative to the window, but removing them places the element where it had been. Then setting width, height and margin will do the rest of the job.

Another option is to make parent element position: relative, absolute or fixed. Then child's position will be calculated relative to that.

Answer 3

If you don't mind a little JavaScript, this will do what you want. The img is in the vertical middle of the section at first, but it will stay in place when the size of the section changes.

 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

You try this.

 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

Use this to specify the exact position of any object.

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

This will lock the object to the top left corner.

And then use this to move it around:

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

This is just examples, modify it to fit with your format (px, %, vh/vw or whatever you use) :-)