CSS centering text both horizontally and vertically

I'm using Dreamweaver CS5 for web design. Basically, I want a very simplistic (ha!) sort of home page. If you look at my site, www.szolr.com, you'll (hopefully) see the site name, a spry menu bar with links to the rest of the site pages, my name and email. It should be sort of in the centre of your browser window. But if I visit the site on my iPhone it doesn't appear in the centre. Why?

I'm guessing it's because I've used <br</br> tags in the html, which is sort of absolute positioning. Am I right? If I want it to appear in the centre of any browser window, mobile or computer, am I right in thinking I'd need to use some sort of relative positioning with CSS. If so how would I do that?

Take out all those page breaks. All your content is being pushed to the bottom of the page. I thought I was staring at a blank page until I notice that there was a scroll bar.

Wow, yeah, that's a break-o-rama

If you want a very simple, relative layout, you're on the right path. Use a table with % attributes, and the content will "float" within the browser, relative to the available display area.


If you want your larger domain name, then the menu, them your name/contact in tier rows, just use a separate row for each:

<tr><td>DOMAIN NAME</td></tr>
<tr><td>MENU</td></tr>
<tr><td>EMAIL</td></tr>

No additional breaks, etc., and if you want to provide really exact positioning inside of the TDs, use a DIV with some CSS positioning attributes.

<tr><td><div class="menuLoc">MENU</div></td></tr>

(and of course, define a .menuloc with appropriate info).

I guess you're in the middle of working on this because for me (on a 15" MacBook) using the latest Chrome, the menu bar is initially out of sight (vertical scroll bar) and slightly off to the left. I'll come back...

OK, I've got rid of all the breaks and created a simple CSS stylesheet, which I've linked the page to. It seems to be displayed as I want it here. Are other people seeing all the page content in the centre of the page both vertically and horizontally?

Yeah, the top and bottom elements are centered horizontally (the vertical is to the top, which seems like what you're shooting for), the menu looks like it's got some additional formatting as part of that menu construct, so it looks out of alignment.

<style type="text/css">
.wraptocenter {
display: table-cell;
text-align: center;
vertical-align: middle;
width: ...;
height: ...;
}
.wraptocenter * {
vertical-align: middle;
}
/*\*//*/
.wraptocenter {
display: block;
}
.wraptocenter span {
display: inline-block;
height: 100%;
width: 1px;
}
/**/
</style>
<!--[if lt IE 8]><style>
.wraptocenter span {
display: inline-block;
height: 100%;
}
</style><![endif]-->