html - 主 Div 内的中心 Div

Question

我创建了一个迷宫，我想将一个内部 div 居中，尽管我以 margin: 0 auto 为中心；它行不通

（当用户进入墙壁并丢失时，此 div 显示悲伤的笑脸）

#highlight_lose {
    width: 550px;
    height:550px;
    position: absolute;
    display: none;
    margin: 0 auto;

}

这是小提琴链接：

http://jsfiddle.net/uqcLn/28/

Answer 1

如果你要使用绝对定位，你需要这样做：

#highlight_lose {
    width: 550px;
    height:550px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -225px 0 0 -225px;
    display: none;

}

编辑：您还需要添加position:relative;到主 div。这是一个更新的小提琴。

http://jsfiddle.net/FragJ/2/

它看起来不正确，因为您还有其他不完全居中的元素。

编辑：正如我之前所说，笑脸看起来并不居中，因为您的代码已关闭。迷宫真的应该在一个 div 里面。但是，我可以通过使用边距来将其眼球居中。

http://jsfiddle.net/FragJ/4/

为此，您需要像这样设置您的CSS：

#main {
    position: relative;
    width: 550px;
    height: 550px;
    float: left;
    margin-left: 220px;
    margin-top: 100px;
    background: grey;
    overflow: hidden;
}

#highlight_win {
    width: 550px;
    height: 550px;
    position: absolute;
    top: 50%;
    left: 50%;
    display: none;
    margin: -180px 0 0 -180px;
}

#highlight_lose {
    width: 550px;
    height:550px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -180px 0 0 -180px;
    display: none;
}

Answer 2

.outer {
            height: 600px;
            width: 500px;
            background-color: black;
        }

        .inner {
            height: 200px;
            width: 200px;
            margin: auto;
            position: relative;
            top: 200px;
            background-color: red;
        }

标记

<div class="outer">

        <div class="inner">

        </div>

    </div>

这个想法是针对固定大小的块元素，设置

margin:auto;

修复水平居中

用于垂直居中对齐孩子的top = half the height of the parent - half the height of the child