围绕一个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

加入这个造型给您的粉红色框格。

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