milov.nl

Interaction design • webdevelopment • web art • photography

milov.nl : forum : coding : 'vertical css center?'

vertical css center? huphtur, 010509 05:41
Heres one for ya...
http://bluerobot.com/web/css/center1.html
...on how to center horizontally
now what about vertical?
sc-24-30-180-250.socal.rr.com
Re: vertical css center? milov.nl,milo,milov, 010509 11:06
Wow, I never tried it before, because I thought it wasn't possible, but as it turns out, it's actually not that difficult to do.

Here's what I came up with:


<html><head><title>css vertical center</title>

  <style type="text/css">

  <!--

    DIV.outer

      {

      position:absolute;

      left:50%;

      top:50%;

      width:300px;

      height:300px;

      margin-left:-150px; 

      margin-top:-150px;

      background-color:#6699CC;

      }

      

    DIV.inner

      {

      position:absolute;

      left:50%;

      top:50%;

      width:100px;

      height:100px;

      margin-left:-50px; 

      margin-top:-50px;

      background-color:#99CCFF;

      }

      

    -->

    </style>

  </head>

  <body>



    <div class="outer">

        in center of page

    

        <div class="inner">

           in center of outer div

        </div>

    

    </div>

  

  </body>

</html>
 
Basically, the trick is to position a div at 50%, 50% and then set its margin-left to negative width/2 and its margin-top to negative height/2.

See it in action at http://milov.nl/code/css/verticalcenter.html
qn-212-127-151-61.quicknet.nl
Re: vertical css center? huphtur, 010509 17:09
that rools!
but if it was so simple...
how come all these doods
http://www.geocrawler.com/mail/thread.php3?subject=Current+recommended+method+for+vertical+centering&list=123
and
http://www.alistapart.com/discuss/read.cfm?forum=52&id=1059&thread=267
have so much trouble with it?
-huph
216.103.149.130
Re: vertical css center? milov.nl,milo,milov, 010509 17:37
I guess it doesn't always works, maybe it doesn't work at all on IE5/Mac (I have no way of testing this myself)... If you don't care about Mac, you might as well use this solution.

In the url you linked I found this message...
http://www.alistapart.com/discuss/read.cfm?forum=52&id=1454&thread=267
...which links to an example-page that does exactly the same negative margin trick as I used. Some concerns about this solution seem to be that it is difficult to fit into an existing layout, and will only be suited for simple splash-pages etc.
qn-212-127-151-61.quicknet.nl
Re: vertical css center? milov.nl,milo,milov, 010509 17:42
FYI, fitting an element in the lower-right corner of the window (without using tables) is a lot simpler:
<div style="position:absolute; right:0px; bottom:0px;">in the corner</div>
 
qn-212-127-151-61.quicknet.nl
Re: vertical css center? huphtur, 010509 17:45
erf.. i just tested yur code on a wackintosh with IE5
and it worked great!
dus geen idee waar die zeikerts het over hebbe dan
milov rools!
ok dan!
216.103.149.130
Re: vertical css center? milov.nl,milo,milov, 010509 18:08
Heheh, alright then... Come on everybody, start vertical-centering!
Were you planning on using it for a specific site, btw?
qn-212-127-151-61.quicknet.nl
Re: vertical css center? huphtur, 010509 19:41
jups.. for a lil artproject im doing with a friend from holland
once its up, ill give ya a seintje...
216.103.149.130
Re: vertical css center? huphtur, 010812 03:22
ok.. back the old centering problem...

i hacked the following code: two 20px bars and one 500px box all stacked with 1px space inbetween. the big box is centered in the middle of the browser, the 2 bars are floating above that box.

i was wondering if there's a more elegant way of doing this? 






<html><head><title>2 bars and a box</title>

<style type="text/css">

  <!--

	DIV.bar1 {

		background-color: #aaa;

		margin-top: -292px;

		left: 50%;

		margin-left: -250px;

		width: 500px;

		position: absolute;

		top: 50%;

		height: 20px;

		}



	DIV.bar2 {

		background-color: #bbb;

		margin-top: -271px;

		left: 50%;

		margin-left: -250px;

		width: 500px;

		position: absolute;

		top: 50%;

		height: 20px;

		}



	DIV.box {

		background-color: #ccc;

		margin-top: -250px;

		left: 50%;

		margin-left: -250px;

		width: 500px;

		position: absolute;

		top: 50%;

		height: 500px;

		}

   -->

</style>

</head>

<body>

	<div class="bar1"></div>

	<div class="bar2"></div>

	<div class="box"></div>

</body></html>
 
sc-24-30-180-250.socal.rr.com
Re: vertical css center? huphtur, 010812 04:46
oh wait.. and i dont mean this type of css cleanup



<html><head><title>2 bars and a box</title>

<style type="text/css">

  <!--

	DIV.all {

		left: 50%;

		margin-left: -250px;

		width: 500px;

		position: absolute;

		top: 50%;

		}



	DIV.bar1 {

		background-color: #aaa;

		margin-top: -292px;

		height: 20px;

		}



	DIV.bar2 {

		background-color: #bbb;

		margin-top: -271px;

		height: 20px;

		}



	DIV.box {

		background-color: #ccc;

		margin-top: -250px;

		height: 500px;

		}

   -->

</style>

</head>

<body>

	<div class="all bar1"></div>

	<div class="all bar2"></div>

	<div class="all box"></div>

</body></html>
 

but i wanna know if its possible to nest bar1 + bar2 inside the box
sc-24-30-180-250.socal.rr.com
Re: vertical css center? milov.nl,milo,milov, 010813 21:42
I guess this is a more elegant way (using nesting, tested in IE6 and Moz):
<html><head><title>2 bars and a box</title>

<style type="text/css">

  <!--

    DIV.box {

            position:absolute;

            left:50%;

            top:50%;

            width:500px;

            height:500px;

            margin-left:-250px;

            margin-top:-250px;

            background-color:#ccc;

            }

	  

	  DIV.bar1, DIV.bar2 {

	          position:absolute;

	          width:100%;

	          height:20px;

	          }

	          

	  DIV.bar1 { top:-40px; background-color:#aaa; }

	  DIV.bar2 { top:-20px; background-color:#bbb; }

   -->

</style>

</head>

<body>

	

	<div class="box">



  	  <div class="bar1">

	  </div>

	  

  	  <div class="bar2">

	  </div>

	    

	</div>

	

</body></html>
 
The two bars are absolutely positioned within the box, making them relative to the topleft of the box. Setting their top-value to -40 and -20 pushes them beyond the top of the box, right where you want them.

Note: you have to set a width for the bars to make them appear ('100%' matches the width of the box, even tho they appear outside it, ha!).
kf-nawij-tg01-0025.dial.kabelfoon.nl
Re: vertical css center? huphtur, 010814 22:59
aha.. thats what i meant yeah
awesome milov.
once again: "madd props!"
216.103.149.130
Re: vertical css center? sinan, 010901 00:07
What about this one...

<DIV STYLE="width: 90%; position: relative;left: 5%;">
<TABLE WIDTH="100%" BGCOLOR="#FF0000">
<TR><TD>BLAH</TD><TR>
</TABLE>
</DIV>
195.145.99.109
Re: vertical css center? huphtur, 010901 00:30
tables != good
216.103.149.130
Re: vertical css center? 23JUL, 010901 04:53
>tables != good
td == div
qn-212-58-162-145.quicknet.nl
Re: vertical css center? a little drawback.. :_( Eiko, 020227 21:05
Sorry guys, but try to resize the window smaller than the inner div... ops! where are the scrollbars? Content sides are cropped!!
212.145.130.180
Re: vertical css center? Bliss, 020302 04:49
I have a resizable page, how can I center horizontally?
148.8.100.35
Re: vertical css center? bgr, 020414 16:39
but is this the way to center images too? because when i tried it didn't work out quite right...
179dyn238.com21.casema.net
Re: vertical css center? Todd KLoots, 020726 04:19
hey - i think that this vertical centering thing is great. however, i have discovered that it does not work on the mac if you specify a doctype. i don't know why, but just thought that i would throw that tip out there.
cvg-165-106-142.cinci.rr.com
Re: vertical css center? tin.it,therox83,r0x, 020810 22:01
Info: HTML 4 no longer supports 'height' attr in tables to discourage layouts through <TABLE> in favor of CSS positioning. Adding the <!DOCTYPE> prologue everyone can notice it.

Bye.
62.98.228.71
Re: vertical css center? poop boy, 020906 05:31
poop is tasty
adsl-20-116-210.mco.bellsouth.net
Re: vertical css center? Scott, 030328 19:45
can anyone tell me how to do the above centering technique but make the table fill the screen at any resolution?
so a table stretches to all edges at 800X600, and also expands when switched to 1024x768.
and the outer table fills the entire window when sizing the browser window.
thanks,
scott
12-228-195-108.client.attbi.com
Re: vertical css center? hotmail.com,zikzorgan,Isen, 030428 07:06

regarding:

"Re: vertical css center? a little drawback.. :_( Eiko, 020227 21:05
Sorry guys, but try to resize the window smaller than the inner div... ops! where are the scrollbars? Content sides are cropped!! "

if you put the div's inside a table set at width:100% and height:100% text-align:center then the horizontal scrollbars show up :)
scf4-fe0-1.wc.optusnet.com.au
Re: vertical css center? Rob Eberhardt, 030824 22:14
I've never seen an elegant, non-table way to do good liquid design (absolutely-positioned approaches break document flow, and never kick in the browser's built-in scrolling for overflowed content).

This works great in IE4+:

<table border="1" style="width:100%; height:100%;">
<tr>
<td valign="middle" align="center">
- this works beautifully -
</td>
</tr>
</table>

or, if you also want to use all points of the compass around the center (plus scrolling contents)...

<table border="1" style="width:100%; height:100%;">
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td valign="middle" align="center">
<div style="height:100%; width:100%; overflow:auto;">
- this works beautifully -
</div>
</td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>

The only catch I've found is that IE for Mac chokes when the table is nested inside another.

Tables == GOOD!
..esp. when they actually do what I need and abs. positioning doesn't yet.
ip-216-23-48-251.adsl.one.net
Re: vertical css center? spivial, 030926 14:01
Rob, this works only for IE, not for Netscape. With css it works for both, though it flips on mac...There is always one that doesn't wanna eat the code...I'm searching for a simple code to center a page vert/hor that works on all platforms/browsers...and none of the above works conform.
ncgent03.telenet-ops.be
Re: vertical css center? ,gertas at o2 dot pl,gertas, 030929 17:48
milov - great example!!!
i use XHTML-Strict.
it worx in IE6sp1 with and without DOCTYPE (so should be in IE5.x to), and also with latest Mozilla,
pb78.lubon.sdi.tpnet.pl
Re: vertical css center? a little drawback.. :_( anno1974.nl,Marcel,Marcel, 031007 17:43
regarding:

"Sorry guys, but try to resize the window smaller than the inner div... ops! where are the scrollbars? Content sides are cropped!!

if you put the div's inside a table set at width:100% and height:100% text-align:center then the horizontal scrollbars show up :)"

Yes, the scrollbars show up, but still the contents is cropped!!
Any solution for this one??
213-84-221-165.adsl.xs4all.nl
Re: vertical css center? infonie.fr,rickman,French Touch, 031027 18:20
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>css vertical center</title>

<style type="text/css">
<!--
center {
text-align:justify;
padding: 10px;
writing-mode: lr-tb;
width : 300px;

}
center.outer
{
height: 100%;
writing-mode: tb-rl;

}

center.outer span { background-color:#6699CC;
}

#my-div {
position : absolute;
left : 200px;
width : 500px;
height : 300px;
top : 100px;
background-color #EEEEEE;
border : 1px solid gray;
padding: 5px;
}



-->
</style>

</head>
<body>

<div id="my-div">

<center class="outer">

<center>
<span>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras mollis lorem eget turpis. Praesent in risus. Maecenas ac libero. Nullam rutrum, justo nec hendrerit suscipit, sapien est rhoncus dolor, quis sagittis lectus lectus a ipsum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos.




</span></center>

</center>
</div>

</body>
</html>

but, it works only for IE5.5+
access-174.115.rev.fr.colt.net
Re: vertical css center? NoCTuRNaL, 031031 02:04
Hmm, all solutions so far have fixed width attributes...
If i do a
DIV.outer {

  position: absolute;

  left: 50%;

  top: 50%;

  width: 80%;

  height: 80%;

  margin-left: -40%; 

  margin-top: -40%;

}
 
, it doesn't work...
nchass03.telenet-ops.be
Re: vertical css center? petatrix, 040201 21:18
Hi guys

I've found that you have to specify your doctype with an absolutely adress something like ...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">;

If you don't write "http://www.w3.org/TR/html4/loose.dtd" the browser doesn't know where to search for the specification of your doctype.

there is a hack for MAC IE 5
http://www.sam-i-am.com/work/sandbox/css/mac_ie5_hack.html

you will find some important information about css here:
http://www.alistapart.com/articles/journey/
chello080110049140.501.15.vie.surfer.at
Re: vertical css center? ranbir, 040217 11:46
you just saved my day. it's so simple, yes...
if top 50% puts the top of the div at 50% of the page hight, then the negative margin (div-height/2) does the trick.

amazing. too good to be true :))

Actually, to fit anything into a centered design, experiment with the margin settings. to shift the div UP increase negative margin, to shift down, decrease.

Thanks for the code and the links
Toronto-HSE-ppp3721088.sympatico.ca
Re: vertical css center? David, 040329 06:35
Yes but if the browser window is resized smaller then the centerpiece, it overflows the edges to the left and to the top. Any ideas as how to stop this from happening.
Toronto-HSE-ppp3714459.sympatico.ca
Re: vertical css center? Philip, 040408 14:37
Hmm..

anybody tried to center a 640x380 image this way?
I tried it, but the image is placed in the right bottom corner, with the left-top corner of the image exactly at the center.
So how can we center a image then....

think.. think...
212.129.232.107
Re: vertical css center? chad, 040410 22:30
Im not too good at DHTML/divs and that stuff, but something like this worked for me:

[code]
<table height=100%><tr><td>Whatever you want to center vertically</td></tr></table>
82.70.4.118
Re: vertical css center? trew, 040422 22:11
If you want this to work well in IE5 mac i should be like this:

<code>.center {
position:absolute;
left:50%;
top:50%;
margin-left:-381px;
/*\*/
margin-top: -220px;
}</code>
ms165.intermedia.net.ar
Re: vertical css center? trew, 040422 22:12
ups sorry.

If you want this to work well in IE5 mac i should be like this: 

.center { 

position:absolute; 

left:50%; 

top:50%; 

margin-left:-381px; 

/*\*/ 

margin-top: -220px; 

}
 
ms165.intermedia.net.ar
Re: vertical css center? Johannes, 040503 16:08
Thank you all guys! I don't really understand why there hasn't been a "center: horisontal, vertical;" command added to CSS, when there obviously is a great need for one. One shouldn't have to trick the browser to show something in a way that really isn't right. Well, never mind. Thank you once again!
h123n2fls303o1039.telia.com
Re: vertical css center? mattah, 040621 21:22
.container { display: table-cell; vertical-align: middle; }

Simple as that.
dsl-082-083-139-203.arcor-ip.net
Pages: 1