CSS centering tricks

css layout positioning center
matt lohkamp picture matt lohkamp · Sep 29, 2008 · Viewed 8.3k times · Source

My favorite equation for centering an xhtml element using only CSS is as follows:

display: block;
position: absolute;
width: _insert width here_;
left: 50%;
margin-left: _insert width divided by two & multiplied by negative one here_

There's also the simpler margin:auto method in browsers that support it. Does anyone else have tricky ways to force content to display centered in its container? (bonus points for vertical centering)

edit - oops, forgot the 'negative' part of one in the margin-left. fixed.

Answer

Ris Adams picture Ris Adams · Sep 29, 2008 
div #centered{
 margin: 0 auto;
}

seems to be the most reliable from my experience.

Related questions

How do I center an SVG in a div?

I have an SVG that I am trying to center in a div. The div has a width or 900px. The SVG has a width of 400px. The SVG has its margin-left and margin-right set to auto. Doesn't work, it …

Read More
Positioning div elements horizontally, not vertically

Im designing a navigation bar; and tab links in it are made by CSS shapes. For this I use alot of position: absolute on child elements, and I have parent containers set to position: relative. I also set a hard …

Read More
Move up character displayed inline

I have the following markup for breadcrumbs menu: <div> <span class="start-here">You are here:<span> <a href="/">example.com</a> <span class="raquo"> › </span> <…

Read More