圍繞一個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%);