Question

正如标题所暗示的，我需要知道如何将应用了以下CSS规则的div居中：

display: table;
position: absolute;

div应该在视口的中间，并且，与display: table;一样，它应该是它的内容的大小。

Answer 1

<强> HTML

<div class="center"></div>

如果表格的高度和宽度都是400px，那么你可以使用这个css：

.center {
    display:table;
    position:absolute;
    height:400px;
    width:400px;
    background:red;
    left:50%;               
    margin-left:-200px;     <---- half of width
    top:50%;                
    margin-top:-200px;      <---- half of height
}

DEMO WITH CSS

如果表格具有动态高度和/或动态宽度，那么您可以使用此jquery：

$('.center').css({
    'left': $(window).width() / 2 - $('.center').width() / 2,
    'top': $(window).height() / 2 - $('.center').height() / 2
});

DEMO WITH JS

将显示为表格并且绝对定位的div居中

1 个答案: