Centering a div with a fixed height

Question

here is what is appearing:

and here is my code:

<div style="height:300px;">

<div style="height:300px;float:left;width:50%;">
    <div style="height:200px;width:70%;margin:auto; background-color:pink;"></div>

</div>
<div style="float:right;width:49%;">


</div>

I already set the height and I want to align the pink box in the middle vertically but margin won't work. How do I do it?

Answer 1

you can easily achieve with

display:inline-block;
vertical-align: middle;
margin : 0 auto;

Answer 2

Add this styling to your pink box div.

position: relative;
top: 50%;
transform: translateY(-50%);
-ms-transform: translateY(-50%);
-webkit-transform: translateY(-50%);