使用CSS居中显示DIV

Question

我想用CSS在页面的中心位置放置一个div，现在在你们给我推荐一些google搜索结果之前，我知道它们不起作用

下面是一个例子：

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与bootstrap一起使用，所以这是不可能的。我也不知道div的宽度或高度，因为它是通过参数传递的

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