A Web Design Community curated by Chris Coyier

A little dab'll do ya

Code Snippets

Code Snippets > CSS > Exactly Center an Image/Div Horizontally and Vertically Submit one!

Exactly Center an Image/Div Horizontally and Vertically

.center {
   width: 300px;
   height: 300px;
   position: absolute;
   left: 50%;
   top: 50%;
   margin-left: -150px;
   margin-top: -150px;
}

Negative margins are exactly half the height and width, which pull the element back into perfect center. Only works with elements of a fixed height/width.

Subscribe to The Thread

  1. Charlie says:

    This doesn’t work on IE…

  2. Ant says:

    I’d use display:inline-block for that. Works much better (dynamic vertical and horizontal dimersions for both container and content).

  3. Anonymous says:

    So, what do I do with the HTML?

  4. Stan says:

    Excellent, thank you. No troubles here.. works well in IE, FF, etc.

It's Your Turn

At this moment, you have an awesome opportunity* to be the person your mother always wanted you to be: kind, helpful, and smart. Do that, and we'll give you a big ol' gold star for the day (literally).

Posting tips:
  • You can use basic HTML
  • When posting code, please turn all
    < characters into &lt;
  • If the code is multi-line, use
    <pre><code></code></pre>
Thank you,
--- The Management ---