Question

我已经阅读了无数关于垂直对齐和居中div的Q＆amp; A和博客帖子，但我无法让最简单的案例工作：直接在html体内的空20x20 div。

HTML：

＆＃13;

 body
    {
        background-color:DarkGray;
        display:table;
    } 

    .box
    {
        background-color:black;

        display:table-cell
        margin:0, auto;    
        
        width:20px;
        height:20px;
    }

＆＃13;

<body>
    <div class="box">
    </div>
</body>

＆＃13;

这是JSFiddle。

Answer 1

display:table和display:table-cell不好，远离它们。这是将div置于<body>内部的一种非常常见的方法。它将元素的顶部和左侧定位在body内的50％点，然后从width和height中减去1/2 margin-top和margin-left

jsFiddle

.box
{
    background-color:black;
    position:absolute;
    left:50%;
    top:50%;
    width:20px;
    height:20px;

    margin-left:-10px; /* -1/2 width */
    margin-top:-10px; /* -1/2 height */
}

Answer 2

首先，在margin样式中存在语法错误：

margin: 0, auto;

但应该是：

margin: 0 auto;

支持垂直定位应该是：

http://jsfiddle.net/olexander/8At93/387/

html, body {
    height: 100%;
}

.box {
    position: relative;
    top: 50%;
    margin: -10px auto; /* -height/2 */
    width: 20px;
    height: 20px;
}

此网站上有讨论Why not use tables for layout in HTML?

Answer 3

Tyriar的代码绝对是最好的解决方案永远记住要将margin-left和margin-top设置为您希望居中的div宽度的一半，因为元素始终从它们的边而不是它们的中心对齐。

如何在没有绝对定位的情况下在身体元素内垂直和水平居中？

3 个答案: