圍繞與CSS

Question

我想和CSS頁面的確切中心到中心一個div，現在一個DIV之前，你傢伙竟然建議我一些谷歌搜索結果的，我知道他們不工作

這一個例如：

top: 50%; 
left: 50%; 

這不會居中一個div，它居中它+寬度+高度。我怎樣才能把它置於中間？這裏是我的div：

<div class="notification-instance ui-draggable ui-draggable-handle" style="width:33.333333333333336%;position:absolute;top:50%;left:50%;margin:0 auto;"> 
    <div class="draggable panel panel-pink"> 
     <div class="panel-heading" style="background-color: #B00049"> 
      Panel Title 
     </div> 
     <div class="panel-body"> 
      Panel Body 
     </div> 
    </div> 
</div> 

我也不能使用col-md bootstrap，所以這是出於queston。 我也不知道我的div的寬度或高度，因爲它是通過parametrer通過

Answer 1

使用transform:translate(-50%,-50%);

<div class="notification-instance ui-draggable ui-draggable-handle" style="width:33.333333333333336%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:#fff;"> 
 
    <div class="draggable panel panel-pink"> 
 
     <div class="panel-heading" style="background-color: #B00049"> 
 
      Panel Title 
 
     </div> 
 
     <div class="panel-body"> 
 
      Panel Body 
 
     </div> 
 
    </div> 
 
</div>

演示是here