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;
}