center div reloaded: 50% of what?

Question

Within here I found the following solution for centering a div within another div:

.centerSplash {
        position: absolute;
        top: 50%;
        left: 50%;
        margin-right: -50%;
        transform: translate(-50%, -50%);
}

So far, that works fine with FF.

In IE(9) it looks like this

   ----------------------------------------------------------
            |                                |  (-50% height to top of 
            +--------------------------------+               the outer div)

whereas Chrome shows:

          ----------------------------------------------------------


          center of outer div              
          ----------->  +--------------------------------+
                        |                                |
                        |                                | 
                        +--------------------------------+

Does anyone have a solution CSS based, non jQuery, non JS and no table cells (that's all I already found here ....).

[edit]

just copied the relevant code here

At first glance, the `margin-right` property seems pointless in this case, also giving it a right margin of `-50%` won't align it to center. See: http://stackoverflow.com/questions/8508275/how-to-center-a-position-absolute-element/25776315#25776315 — Hashem Qolami, Sep 18 '14 at 12:20
@RishabhShah Small code like this don't need fiddle, you can do it yourself : http://jsfiddle.net/9zmo881b/ — BENARD Patrick, Sep 18 '14 at 12:20
keep in mind that every browser has a default "user-agent" styling which it applies to some elements unless overridden by you. — Banana, Sep 18 '14 at 12:20
http://stackoverflow.com/questions/114543/how-to-horizontally-center-a-div-in-a-div — SkyDream, Sep 18 '14 at 12:22
@karan3112 Actually [it *does*](https://developer.mozilla.org/en-US/docs/Web/CSS/transform#Browser_compatibility). — Hashem Qolami, Sep 18 '14 at 12:26
chrome displays this fine by me in the fiddle which the OP posted — Danield, Sep 18 '14 at 12:31

score 1 · Accepted Answer · answered Sep 18 '14 at 12:33

Try using this technique

CSS

.centerSplash {
       position: absolute;
        top: 50%;
               /*Add this*/
        left: 0; 
        right: 0; 
        margin-left: auto; 
        margin-right: auto; 
}

This works only if the width is specified.

DEMO

center div reloaded: 50% of what?

1 Answers1