CSS – Vertical / Horizontal Centering

@plusonetwoNov 28.2002

Hi all…

I need some help, if possible, and this seems like the right forum to post in.

I’d like to have a graphic and text (in a table) center vertically and horizontally in the browser window. With HTML, I’d normally use the width and height attributes (set at 100%) in a master <TABLE> to do this but XHTML no longer recognizes the height attrib. Any ideas on how to use CSS to now do this?

Thanks,

– Michael H.

to post a comment

CSS

19 Comments(s) _↴

@StefanNov 28.2002 — #No <table> needed...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >

<head>

<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=iso-8859-1" />

<title>Hor & Vert Center</title>

<meta http-equiv="Content-Style-Type" content="text/css" />

<meta http-equiv="Content-Script-Type" content="text/javascript" />

<style title="Default" media="screen" type="text/css">

#center {width:200px; height:100px; position:absolute; top:50%; left:50%; margin:-50px auto auto -100px; border:1px solid black; text-align:center;}

</style>

</head>

<body>

[color="tomato"]

<div id="center">

Your centered box.

</div>

[/color]

</body>

</html>

@plusonetwoauthorNov 29.2002 — #Hi Stefan...

Thanks for your help. It wasn't exactly the solution I was looking for but did get me on the right track. Here's what I have so far. I've removed some irrelevant code for this post.

<style type="text/css">

body {

margin:0;

padding:0;

color: #33cccc;

}

.hold {

position: absolute;

height: 100%;

width: 100%;

margin: 0px;

padding: 0px;

}

</style>

</head>

<body>

<div class="hold" align="center"><img src="brand_cov01.gif" alt="Green Cover" name="brandcov" id="brandcov" width="147" height="313" border="0" align="middle"></div>

</body>

</html>

Everything almost works as it's supposed to. The image I have in the div tag is centered horizontally but not vertically. Rather, it's aligned to the top center of the browser window. My overall goal was to have it in the center of a browser window no matter how wide or narrow, etc. Ideas on how to have it vertically in the middle?

Thanks again,

- Michael

@StefanNov 29.2002 — #[i]Originally posted by plusonetwo [/i]

My overall goal was to have it in the center of a browser window no matter how wide or narrow, etc. Ideas on how to have it vertically in the middle?
[/QUOTE]

I have already give the code for exactly that in this thread.

@plusonetwoauthorNov 29.2002 — #Alright... I don't understand XHTML all too clearly yet so bear with me. Your code does work correctly when I copy/paste, however, when I change out what's inside the DIV tag, such as with a graphic, what, if anything, do I have to adjust elsewhere. I say this because, for instance, I put a 349x313 graphic in the DIV and it was pushed off the right side of the browser a bit.

Thanks,

- Michael

@plusonetwoauthorNov 29.2002 — #Hmm... never mind. Got the solution in the #center style tag. Thanks, though.

- Michael

@StefanNov 29.2002 — #[i]Originally posted by plusonetwo [/i]

[B]Alright... I don't understand XHTML all too clearly yet so bear with me.

[/QUOTE]

Sorry, didn't think it would cause a problem since it's almsot exatly the same as HTML 4.01.

Just for referance here is a how it would look in "normal" HTML 4.01

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

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<meta http-equiv="Content-Script-Type" content="text/javascript">

<meta http-equiv="Content-Style-Type" content="text/css">

<title></title>

<style title="Default" media="screen" type="text/css">

#center {width:200px; height:100px; position:absolute; top:50%; left:50%; margin:-50px auto auto -100px; border:1px solid black; text-align:center;}

</style>

</head>

<body>

<div id="center">

Your centered box.

</div>

</body>

</html>

Your code does work correctly when I copy/paste, however, when I change out what's inside the DIV tag, such as with a graphic, what, if anything, do I have to adjust elsewhere. I say this because, for instance, I put a 349x313 graphic in the DIV and it was pushed off the right side of the browser a bit.

[/QUOTE]

Yes, the values in the #center has to be changed depending on the size of the content you put in there.

If you only work with inline content, like plain text and images you could also use the shorter CSS (since text-align:center; will center it horizontally anyway)

#center {width:100%; height:313px; position:absolute; top:50%; left:0; margin:-157px auto auto; border:1px solid black; text-align:center;}

(also adapted it to the image height, in this case 313px)

@allierDec 02.2002 — #To acheive what I anderstand you want to do, you should combine absolute and relative positioning like :

<div align="center"><div id="layer33" style="position: relative; left: 0px; width: 826px; height: 136px;">

<div id="Layer39" style="position: absolute; left: 0px; width: 276px; background: #993399; height: 136px;">

...</div></div>

HTH

@StefanDec 02.2002 — #[i]Originally posted by allier [/i]

[B]To acheive what I anderstand you want to do, you should combine absolute and relative positioning like :

<div align="center"><div id="layer33" style="position: relative; left: 0px; width: 826px; height: 136px;">

<div id="Layer39" style="position: absolute; left: 0px; width: 276px; background: #993399; height: 136px;">

...</div></div>

HTH [/B][/QUOTE]

What would be the advantage of this code vs what is already in this thread? ?

To me it doesn't even seem to be close to what the original posted asked for.

Are you perhaps forgetting to include the CSS attached with the ID attributes?

@allierDec 03.2002 — #What would be the advantage of this code vs what is already in this thread? [/quote]

The advantage of a position: relative then a position: absolute is that you can put this layers, anyware in your page,not depending of the height of what is above .

@StefanDec 03.2002 — #[i]Originally posted by allier [/i]

[B]The advantage of a position: relative then a position: absolute is that you can put this layers, anyware in your page,not depending of the height of what is above . [/B][/QUOTE]

Wouldn't that be a disadvantage in this case, considering the original poster wanted something hor & vert centered on the screen.

With other content above it, first relative positioning will not make your content vertically centerd on screen.

I also see other pontential problems with your code example eg width: 826px. That will give a horizontal scrollbar at all resolutions <1024px

@vernesJul 10.2006 — #The first example of Stefan works... untill you shrink the browser window beyond the size of the DIV size.

The DIV will be kept centered causing the TOP of the DIV to move upward.

I'd like to know how I can keep the DIV from moving beyond the top boundry of the browserwindow.

@WebMaisterAug 31.2006 — #me too!

@asterixDec 02.2006 — #I recently wrote an article on this - [url=http://www.contractwebdevelopment.com/css-vertically-and-horizontally-center]CSS Vertically and Horizontally Center[/url] - does that solve your problem?

@mark_yiehDec 12.2006 — #
The first example of Stefan works... untill you shrink the browser window beyond the size of the DIV size.

The DIV will be kept centered causing the TOP of the DIV to move upward.
[/quote]

min-width and min-height

@salil2121May 01.2010 — #This link worked for me with demos.

http://8bt.in/SH9Xdf

now I can Place a div box at the center of screen any screen resolutions

@Master00May 05.2010 — #ya but look what happens when you resize the browser window. it doesnt adjust itself, it works off the parameters from when the page was loaded and you have to refresh to re-center it

@salil2121May 05.2010 — #Yep..that's right, but It is the only way currently available, if we need to use div alone. Otherwise you can use a div inside two tables...and It will resolve the problem. Check this link

http://8bt.in/jD1oIC

The div will be at center of screen, It will adjust itself.

But actually the second table is at center and div uses It's position...

? Na?

@salil2121May 05.2010 — #[B]CHECK DEMO[/B]

http://8bt.in/omDwHf

??

@Master00May 05.2010 — #Here is a javascript example that will adjust when the browser is resized.

http://www.alistapart.com/d/footers/footer_variation1.html

Also in #CSS _↴

How would you code this with divs?[RESOLVED] IE displaying transparent PNG and broken image at the same time Random Gap, can't work out why

Success!

Help @plusonetwo spread the word by sharing this article on Twitter...

Tweet This

CSS – Vertical / Horizontal Centering

19 Comments(s) _↴

Also in #CSS _↴

Success!

Social

Version

CSS – Vertical / Horizontal Centering

19 Comments(s) ↴

Also in #CSS ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

19 Comments(s) _↴

Also in #CSS _↴