How do I vertically center align the parent container to the canvas which has position:relative
? The parent container has a child element with position:absolute
. The child element has been positioned in the center of the parent container.
Here's a snippet:
.container {
position: relative;
width: 300px;
height: 300px;
background-color: red;
margin: auto;
}
.item {
position: absolute;
width: 100px;
height: 100px;
background-color: blue;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
}
<div class="container">
<div class="item"></div>
</div>
See Question&Answers more detail:os