Struggling to align two divs both vertically and horizontally within their respective parent containers that are placed side by side with 50% width and 100% height?
Check out my solution on Codepen for reference.
*** HTML ***
<div class="parent">
<div class="left">
<div class="info">
<h1>This div needs to be perfectly centered <br>within the left half</h1>
<h2>Contact us:</h2>
<h1>
+44 (0)1323 567 891<br>
+44 (0)1323 132 363<br>
<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="acc5c2cac3ecdfc3c1c9cfc3c1dccdc2d582cfc382d9c7">[email protected]</a><br>
</h1>
</div>
</div>
<div class="right">
<div class="img-wrapper">
<img src="http://placehold.it/210x210/FE5000/FFF"/>
</div>
</div>
</div
*** CSS ***
.parent {
height: 100%;
width: 100%;
}
.parent:before, .parent:after {
display: table;
content: " ";
}
.parent:after {
clear: both;
}
.left, .right {
float: left;
height: 100%;
width: 50%;
}
.info {
width: 400px;
height: 280px;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}
.right .img-wrapper {
width: 210px;
height: 210px;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: 0 auto;
}