CSS Vertical Centering Centering with Position: absolute
Example
HTML:
<div class="wrapper">
<img src="/?originalUrl=https%3A%2F%2Friptutorial.com%2F%26quot%3Bhttp%3A%2F%2Fcdn.sstatic.net%2FSites%2Fstackoverflow%2Fcompany%2Fimg%2Flogos%2Fso%2Fso-icon.png%3Fv%3Dc78bd457575a%26quot%3B%26gt%3B%26lt%3B%2Fdiv%26gt%3B%253C%2Fcode">CSS:
.wrapper{
position:relative;
height: 600px;
}
.wrapper img {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
If you want to center other then images, then you must give height and width to that element.
HTML:
<div class="wrapper">
<div class="child">
make me center
</div>
</div>
CSS:
.wrapper{
position:relative;
height: 600px;
}
.wrapper .child {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
width: 200px;
height: 30px;
border: 1px solid #f00;
}
