Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

CSS centering tricks [closed]

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.

like image 498
matt lohkamp Avatar asked Sep 29 '08 10:09

matt lohkamp


1 Answers

div #centered{
 margin: 0 auto;
}

seems to be the most reliable from my experience.

like image 133
Ris Adams Avatar answered Oct 31 '22 01:10

Ris Adams