# HTML/CSS - vertical centering?

**URL:** https://boards.straightdope.com/t/html-css-vertical-centering/134853
**Category:** Factual Questions
**Created:** [November 1, 2002, 4:08pm UTC](https://boards.straightdope.com/t/html-css-vertical-centering/134853 "2002-11-01T16:08:50Z")
**Posts on this page:** 9
**Page:** 1

<div class="post-metadata">

### Author: ![Crusoe](https://avatars.discourse-cdn.com/v4/letter/c/49beb7/32.png) [@Crusoe](https://boards.straightdope.com/u/Crusoe)
#### Post date: [November 1, 2002, 4:08pm UTC](https://boards.straightdope.com/t/html-css-vertical-centering/134853/1 "2002-11-01T16:08:50Z")

</div>

I have a CSS-based webpage where I’d like the content centred horizontally and vertically. Horizontal is easy. Vertical is proving tricky, particularly because I’d like the content to be centred in whatever browser window size the viewer has.

I’d like to steer clear of a traditional TABLE layout or JavaScript; how else can I get content centred vertically in IE, Opera, Netscape, Mozilla (etc)?

---

<div class="post-metadata">

### Author: ![dylan\_73](https://avatars.discourse-cdn.com/v4/letter/d/ecccb3/32.png) [@dylan\_73](https://boards.straightdope.com/u/dylan_73)
#### Post date: [November 1, 2002, 4:35pm UTC](https://boards.straightdope.com/t/html-css-vertical-centering/134853/2 "2002-11-01T16:35:41Z")

</div>

I don’t know. But is [this](http://www.meyerweb.com/eric/css/edge/complexspiral/demo.html) the type of thing you’re looking for?

Problem: it doesn’t display correctly in IE because IE doesn’t support some CSS tag. There might be a way around that though…have a look through their site (nice stuff).

---

<div class="post-metadata">

### Author: ![Crusoe](https://avatars.discourse-cdn.com/v4/letter/c/49beb7/32.png) [@Crusoe](https://boards.straightdope.com/u/Crusoe)
#### Post date: [November 1, 2002, 4:38pm UTC](https://boards.straightdope.com/t/html-css-vertical-centering/134853/3 "2002-11-01T16:38:12Z")

</div>

Not quite - it’s more that I have a simple box of content (defined using DIV tags) that I want to appear centred regardless of browser window size. Seems simple in theory, but apparently very difficult in practice.

---

<div class="post-metadata">

### Author: ![garius](https://avatars.discourse-cdn.com/v4/letter/g/e19b73/32.png) [@garius](https://boards.straightdope.com/u/garius)
#### Post date: [November 1, 2002, 4:45pm UTC](https://boards.straightdope.com/t/html-css-vertical-centering/134853/4 "2002-11-01T16:45:39Z")

</div>

okay, off the top of my head…

if you have a simple box of content then its relatively easy to do - all you have to do is work out what size (percentage-wise) your simple box is going to be.

For arguments sake lets say your box is going to take up 20% of the screen - all you need to do is create a layer and make it position: absolute; top: 40%.

---

<div class="post-metadata">

### Author: ![erislover](https://avatars.discourse-cdn.com/v4/letter/e/71e660/32.png) [@erislover](https://boards.straightdope.com/u/erislover)
#### Post date: [November 1, 2002, 5:30pm UTC](https://boards.straightdope.com/t/html-css-vertical-centering/134853/5 "2002-11-01T17:30:04Z")

</div>

Why steer clear of tables?

---

<div class="post-metadata">

### Author: ![Balthisar](https://sea3.discourse-cdn.com/straightdope/user_avatar/boards.straightdope.com/balthisar/32/2825_2.png) [@Balthisar](https://boards.straightdope.com/u/Balthisar)
#### Post date: [November 1, 2002, 5:31pm UTC](https://boards.straightdope.com/t/html-css-vertical-centering/134853/6 "2002-11-01T17:31:37Z")

</div>

Hmmm… finally a little shameless self promotion:

Don’t forget to check out _Cascade_ at [http://www.balthisar.com](http://www.balthisar.com). It’s a CSS editor, and has pretty thorough help, and is my free gift to you. 🙂

---

<div class="post-metadata">

### Author: ![Crusoe](https://avatars.discourse-cdn.com/v4/letter/c/49beb7/32.png) [@Crusoe](https://boards.straightdope.com/u/Crusoe)
#### Post date: [November 1, 2002, 9:10pm UTC](https://boards.straightdope.com/t/html-css-vertical-centering/134853/7 "2002-11-01T21:10:23Z")

</div>

Cheers all! I forgot about “absolute”; maybe that’s what I need.

**Erislover** : using table tags for presentational markup isn’t really the point of (I think) XHTML/CSS2, so it’s more of a challenge to myself, really. No good reason beyond that.

---

<div class="post-metadata">

### Author: ![typhoon](https://avatars.discourse-cdn.com/v4/letter/t/ed8c4c/32.png) [@typhoon](https://boards.straightdope.com/u/typhoon)
#### Post date: [November 1, 2002, 11:42pm UTC](https://boards.straightdope.com/t/html-css-vertical-centering/134853/8 "2002-11-01T23:42:49Z")

</div>

The “vertical-align” property only works with table cells. I’m not sure what for what reason this is so, but even the most recent builds of Mozilla don’t attempt to correct this, so presumably, there’s a good one.

---

<div class="post-metadata">

### Author: ![garius](https://avatars.discourse-cdn.com/v4/letter/g/e19b73/32.png) [@garius](https://boards.straightdope.com/u/garius)
#### Post date: [November 2, 2002, 5:43pm UTC](https://boards.straightdope.com/t/html-css-vertical-centering/134853/9 "2002-11-02T17:43:03Z")

</div>

for anyone interested in the “why not tables - why use css?” arguement, its worth taking a look at the alistapart article titled “To hell with bad browsers” which can be found here:

> **[To Hell With Bad Browsers](https://alistapart.com/article/tohell/)**
>
> In a year or two, all sites will be designed with standards that separate structure from presentation (or they will be built with Flash 7). We can watch our skills grow obsolete, or start learning …

and its follow-up article - “A Web Designers Journey”

> **[From Table Hacks to CSS Layout: A Web Designer’s Journey](https://alistapart.com/article/journey/)**
>
> Redesigning A List Apart using CSS should have been easy. It wasn’t. The first problem was understanding how CSS actually works. The second was getting it to work in standards-compliant brows…
