Announcement

**Shinykirby** · Apr 14, 2009, 01:10 PM

I don't believe there is any direct way to vertically center an element on a page with only CSS and HTML. You may want to consider obtaining the client's window height through a different language (such as Javascript) and then using a width / 2 for the vertical spacing offset.

http://www.softcomplex.com/docs/get_..._position.html

Not sure if this helps. Best of luck.

**XSapphire** · Apr 14, 2009, 01:13 PM

I'd rather not use javascript or another language to achieve this. Surely it must be possible, according to that guide it is but it doesn't seem to work.

**BoldUlysses** · Apr 14, 2009, 01:17 PM

It's quite easy:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

	<title>Vertical Centering</title>
	
	<style type="text/css">	
	
		#wrap {
			[B]position:absolute;[/B]
			[B]height:300px;[/B]
			[B]width:500px;[/B]
			padding:10px;
			border:2px solid #ccc;
			[B]left:50%;[/B]
			[B]top:50%;[/B]
			[B]margin:-162px 0 0 -262px;[/B]
			font:0.8em arial, sans-serif;
		}
	
	</style>
	
</head>

<body>

	<div id="wrap">
	
		This is the vertically-centered container.
	
	</div>
	
</body>
</html>

The example above contains the general principle: Absolutely position a fixed-dimension box 50% from the top and the sides of the browser window (centered, in other words), then "back it off" half its width and height using negative margins.

It's much simpler than mucking about with all the display:table-cell nonsense.

The only downside is that you lose some content at very low browser window sizes; however, there's a JS fix for that. The design site linked to in my sig makes use of it.

Hope that helps!

**Shinykirby** · Apr 14, 2009, 01:21 PM

Originally posted by XSapphire View Post

I'd rather not use javascript or another language to achieve this. Surely it must be possible, according to that guide it is but it doesn't seem to work.

Looking at the guide, I noticed that it encases everything within a table, in which case it is entirely possible to vertically align something. I tend to stray away from tables, however; they're quite annoying to deal with.

Also, a question. Why don't you include the <--[if IE] section in the actual CSS script, instead of using a source link then adding that?

**XSapphire** · Apr 14, 2009, 01:49 PM

Originally posted by msuffern View Post

It's quite easy:

Code:

snip

The example above contains the general principle: Absolutely position a fixed-dimension box 50% from the top and the sides of the browser window (centered, in other words), then "back it off" half its width and height using negative margins.

It's much simpler than mucking about with all the display:table-cell nonsense.

The only downside is that you lose some content at very low browser window sizes; however, there's a JS fix for that. The design site linked to in my sig makes use of it.

Hope that helps!

@ Shinykirby: I didn't realise you can

The problem with that is I need to center a non-fixed width div... how can I do that? Look at my code, how can I center that?

**BoldUlysses** · Apr 14, 2009, 03:22 PM

Originally posted by XSapphire View Post

The problem with that is I need to center a non-fixed width div... how can I do that? Look at my code, how can I center that?

Maybe I'm not seeing the forest for the trees here, but in the link you posted, your box has a fixed width:

Code:

#box {
	background-color:#333333;
	[B][COLOR="Red"]width: 600px;[/COLOR][/B]
	margin: 0 auto 0 auto;
	padding: 0px 7px 7px 7px;
	border: 3px white solid;
	color: white;
}

I assume you mean non-fixed height?

In any case, your scrollbar issues in FF and Safari are coming from the fact that you haven't reset your browser defaults. Add this to the beginning of your CSS:

Code:

* {
	padding:0;
	margin:0;
}

And your IE issues stem from the fact that when absolutely positioning things, IE really likes to have both directions specified. Add this to your conditional CSS:

Code:

#position { 
	position: absolute; 
	top: 50%;
	[B]left:0;[/B]
}

For the record, this whole technique is a major hack, and I would rethink my page design before I implemented any of it. It's like trying to teach an old dog (table-based layout design) new tricks (semantic, table-less layout). New (and better) ways of doing things require new paradigms.

**XSapphire** · Apr 14, 2009, 04:01 PM

Hi msuffern,

Yes I did mean fixed-height sorry.

Thanks for posting how to sort it, and the scrollbar issue was going to be another question

It all works fine now.

For the record, this whole technique is a major hack, and I would rethink my page design before I implemented any of it. It's like trying to teach an old dog (table-based layout design) new tricks (semantic, table-less layout). New (and better) ways of doing things require new paradigms.

So from this I take it that you are suggesting a page redesign to avoid using the hack. What would you suggest for my page? (fixed-height or...?)

**BoldUlysses** · Apr 14, 2009, 04:44 PM

Originally posted by XSapphire View Post

So from this I take it that you are suggesting a page redesign to avoid using the hack. What would you suggest for my page? (fixed-height or...?)

I take that back; it's a minor hack given that it doesn't overtly disregard the semantics of the HTML. I think the tone of my reply was driven by the amount of time it took me to track down the dumb IE issue. I was just bitter. Live and learn...

For the record, every designer has their "limit" when it comes to incorporating hacks and bending the the semantics of the code a bit to fit their design intent. Some designers stick to the strict meaning of the code elements and use hardly any workarounds; others will say "if it works, use it" and use tables for layout and all manner of HTML tags in ways that diverge from their meaning. I lean toward the former position for a number of reasons I won't get into here.

All that said, the hack in this thread is kind of extensive just to allow the box to expand vertically with the content. It just doesn't seem like a good functionality / code bloat trade-off. I guess that's my major issue with it. As far as deciding whether an alternative approach would be preferable and if so, which one, that all depends on what your site is doing and the context of the page.

**XSapphire** · Apr 14, 2009, 06:15 PM

Okay, thanks for all the help matt

**Camron467** · Apr 14, 2009, 06:19 PM

the easiest way for me, that works on all browsers is to make a div, #container and put that around everything. then do as follows:

Code:

body {
     text-align: center;
}

#container{
     text-align: left;
}

works like a charm

**XSapphire** · Apr 14, 2009, 07:29 PM

Originally posted by Camron467 View Post

the easiest way for me, that works on all browsers is to make a div, #container and put that around everything. then do as follows:

Code:

body {
     text-align: center;
}

#container{
     text-align: left;
}

works like a charm

Isn't that horizontal centering?

Announcement

Vertical centering (non-fixed width)

Vertical centering (non-fixed width)

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment