Question

我创造了一个迷宫，我想要一个内部div 虽然我以保证金为中心：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

中心Div在主Div内

2 个答案: