center text in a div

[brown2005]

hi if i have a <div> that is 500 pixels wide and 500 pixels high, can i center say a word in the center horizontally and vertically.

 

thanks

[moberemk]

In theory, yes; in practice, it doesn't really work all that well, given the poor browser support for the properties you need to use.

[bronzemonkey]

Harder than it sounds.

 

Centering a block element within a block element is relatively easy:

 

.outerbox {position:relative; width:500px; height:500px; border:1px solid #000;}
.innerbox {position:absolute; top:50%; left:50%; display:block; width:400px; height:400px; border:1px solid #000; margin:-200px 0 0 -200px;}

<div class="outerbox">
   <div class="innerbox"></div>
</div>

 

Doing the same with an inline element is much harder, especially if you want it to remain centered when the user starts fiddling around with text-size, and I can't think of any satisfactory way to do it. If I wanted to put a word in the center of a div, until someone shows me a better way, I'd probably use a small image (because I could then use the centering technique above and avoid resizing problems).