Centering web content verticvally and horizontally

  ben-jam-in 13:26 22 May 07
Locked

I see so many website that have nice slick design which are centred horizontally and also vertically, no matter what size the window is. I know you can do it horizontally in Dreamweaver but I don't seem to be able to do it vertically.

please see the following example click here

do I need to hard code it or is there a hidden way?

Help please?

Ben-jam-in!

  Eric10 16:38 22 May 07

I've just been playing with some code based on the style sheet from the web page you linked to and have come up with this:

<div style="background-color: #ff0000; height: 350px; width: 500px; position: absolute; top: 50%; left: 50%; margin-top: -175px; margin-left: -250px;"> </div>

The negative margin values are arrived at by trial and error and need to be varied according to the width and height of the div.

  Eric10 09:42 25 May 07

If you prefer to use an external stylesheet then you could use the following code in it:

#center_xy {
background-color: #ff0000;
height: 350px;
width: 500px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -175px;
margin-left: -250px;
}

If you named your stylesheet "center.css" then you would link to it in the head section of your page:

<link href="center.css" rel="styleSheet" type="text/css">

You would then call it in the body of your page as follows:

<div id="center_xy">
<p>Content of the box</p>
</div>

I had said that the negative margins were trial and error and that is indeed how I arrived at them but as I look at the code now I realise that they are actually exactly half the width and height of the container which ties in with the 50% positioning.

Has any of this helped you?

  ben-jam-in 13:46 26 May 07

both of these options are great thanks for your help.

This thread is now locked and can not be replied to.

Surface Pro 5 News - release date, UK price, features, specs

Animator Emanuele Kabu’s psychedelic video is a stunning tribute to Lisbon city

Best Mac antivirus 2017