Центрирование DIV с CSS

Question

Я хочу, чтобы отцентрировать DIV в точном центре страницы с помощью CSS, теперь перед вами, ребята, на самом деле предложить мне некоторые результаты Google, я знаю, что они не работают

Это один например:

top: 50%; 
left: 50%; 

Это не центр 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 с начальной загрузки, так что это из 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