Issue

I’m looking for a way to horizontally center a div on a page in Google Chrome.

I tried using margin: auto; But I read that this feature is not supported in Google Chrome. As a result, my div stays positioned on the left side of the screen.

For example, say you use margin-left: 100px; The div moves towards the center of the page, but I don’t want to manually center it.

HTML:

    

        
John Doe
        
Email
    

 

CSS:

body
{
Background color: #f0f0f0;
}

division
{
border radius: 5px;
}

#header
{
position held;
Background color: #3399ff;
Color: White;
Width: 60%;
margin: auto;
}

#header p
{
display: inline;
}


Solution

margin: auto does not work with fixed (or absolutely) positioned divs. Instead, left: 50% and the left margin should be set to the negative half of the element width.

#header
{
    position held;
    Width: 60%;
    Left: 50%;
    margin left: -30%;
}
 

http://jsfiddle.net/ZAqJM/

Update: Most browsers now support transfrom: translate so you can comfortably do it:

{
    position held;
    Left: 50%;
    Transform: translateX(-50%);
}
 

Answered By – Explosion Pills

Answer Checked By – Senaida (Easybugfix Volunteer)

Tags: css, google-chrome, html