以固定高度居中的div

Question

这是出现的内容：

这是我的代码：

<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>

我已经设置了高度，我希望将粉红色的框垂直对齐，但margin不会起作用。我该怎么做？

Answer 1

你可以轻松实现

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

Answer 2

将此样式添加到粉红色的盒子div。

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