Center Div inside a main Div

Question

i created a maze and i want to center an inside div although i center it with margin: 0 auto; it won't work

(this div shows sad smily face when user enter the wall and lose)

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

}

here is the fiddle link:

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

When I have an absolute position I will sometimes use this trick to center it. Set it to left: 50%; and you can set margin-left: -275px; to offset half the width of your smiley. This will always keep your smiley center. :) — bradcush, Oct 07 '13 at 17:56
It looks like it is centered inside `#main`. Is this what you wanted? — DFord, Oct 07 '13 at 17:59
@ExplosionPills i nned the smily(#highlight_lose) will be in the center to the maze(#main) — alonblack, Oct 07 '13 at 20:34
@JoshC no cuz it's not centered:). i nned the smily(#highlight_lose) will be in the center to the maze(#main) — alonblack, Oct 07 '13 at 20:35
Here are two simple methods to center divs within divs, vertically, horizontally or both (pure CSS): http://stackoverflow.com/a/31977476/3597276 — Michael Benjamin, Aug 20 '15 at 15:21

aaronmallen · Answer 1 · 2013-10-08T11:57:26.043

If you're going to use absolute positioning you need to do it like this:

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

}

Edit: you also need to add position:relative; to the main div. Here is an updated fiddle.

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

It looks off because you have other elements that aren't exactly centered.

EDIT: As I stated earlier, the smiley didn't look centered because your code is off. The maze really should be inside a div itself. However I was able to eyeball center it simply by playing with the margins.

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

To achieve this you'll need to set your css like this:

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

@JoshC thanks for your time but it's not centered in the fiddle example u gave me — alonblack, Oct 07 '13 at 20:36

score 0 · Answer 2 · answered Oct 07 '13 at 18:07

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

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

markup

<div class="outer">

        <div class="inner">

        </div>

    </div>

The idea is for fixed sized block elements, setting

margin:auto;

fixes horizontal centering

for vertical central alignment the child's top = half the height of the parent - half the height of the child

Center Div inside a main Div

2 Answers2