I have been experimenting with a method to vertically center an element in a div that has unknown height.
You can check out the approach I used here:
In my case, I am working with anchor tags and this solution was particularly helpful due to the position relative issue.
If you want more information on using position absolute vs position relative for vertical alignment, you can refer to this link: When to use position absolute vs position relative when vertically aligning with css
One problem I encountered was overlapping elements when using position:absolute, especially because I had one element right next to another.
Is there any alternative method to address this without resorting to flexbox?
Here is the HTML structure:
<div class"parent-container">
<a href="">Some content</a>
<a href=""><img src""></a>
</div>
And here is the CSS code:
.parent-container {
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.parent-container a {
position: absolute;
top: 50%;
transform: translateY(-50%);
}