How do I get something to be in the middle?

[OM2]

Can someone tell me how I can get something to be exactly in the middle of the screen?

I can't quite figure out how.
I can float left or right: but not in the middle.

Thanks.


OM

[ryanbutler]

Assuming a fixed with layout, this would work:

CSS:

#container{
   width:700px;
   margin:0 auto;
}
#left{
  float:left;
  width:150px;
}
#middle{
  float:left;
  width:400px;
}
#right{
  float:left;
  width:150px;
}
#footer{
  clear:both;
}

HTML:

<div id="container">
<div id="left">

</div>
<div id="middle">

</div>

<div id="right">

</div>

<div id="footer">

</div>
</div>

[Centauri]

To centre something via css, set a width and give the side margins auto width. So margin: 0 auto; in the css will set the top and bottom margins to zero, and the side margins to auto.

Cheers
Graeme

[ray326]

Position it absolutely at 50% 50% with negative top/left margins half the pixel size of the thing you're positioning.

[ryanbutler]

Why would you want to position it absolutely? There's no need to in most cases.

[ray326]

Depends if you really want it in the "middle" of the page, which indicates vertical as well as horizontal centering. Note what OM2 said.