How to: vertical centering with CSS

18 Jul 2003

For a long time I'd wanted to achieve a vertical centering effect with CSS that I used to achieve with tables or frames. A fixed size block that floats dead centre in the browser window, no matter what its size. Techniques for horizontal positioning have been known for some time, with the 2 methods described on Blue Robot. Then I found across a piece on Web Page Design for Designers, outlining how to do this. Nirvana! It uses absolute positioning to put find the exact centre point of the window, and then uses negative margins to 'shift it all back halfway', producing the effect. It works, but there are 2 problems with this:

the problems

the solutions:

the cut-off content problem

The WPDFD technique uses 2 container divs - #horizon for the vertical and #content for the horizontal. Originally, these 2 divs were needed due to a bug in Opera. While this has since been fixed in version 7, there is another use for the extra container div.

Instead of using absolute positioning to center horizontally, use the auto margin method to centre the second <div> within the first. This is the best way, as it stops trying to centre the content when the window is too small. This still cuts of the the left hand side in Mozilla/Camino/Firebird, but all it needs is a 'min-width' value adding to the containing <div> to stop this.

Here's the new CSS:


#horizon {
	background-color: transparent;
	position: absolute;
	top: 50%;
	left: 0px;
	width: 100%;
	margin-top: -200px;
	text-align: center;
	min-width: 900px; 
}
#wrapper {
	background-color: #fff;
	position: relative;
	text-align: left;
	width: 900px;
	height: 380px;
	margin: 0px auto;
	}

The addition of position:relative in the #wrapper rule allows me to position everything inside it using position:absolute rather than floats, which makes life easier and accurate. You may not need this however. This solves the problem of content being cut off horizontally.

As for the vertical - you just have to make sure that you specify a height that will fit in your target market's lowest screen resolutions. I used 380px, which should fit in most browsers at 800x600 (once you've allowed for all that browser chrome).

IE5 mac and the commented backslash hack

To solve the IE5 mac problem, you need to use the commented backslash hack. First you add your style rules to work in IE5 mac, then you add your real styles rules, beginning with a backslashed comment and ending with a normal comment. IE 5 Mac ignores everything between the 2 comments, and these override the previous rules, providing the centering effect for all the other browsers:

 
 /* styles for IE 5 Mac */
 #horizon {
	background-color: transparent;
	position: absolute;
	top: 20px;
	left: 20px;
 }
 
 /* following rules are invisible to IE 5 \*/
 #horizon {
   top: 50%;
   left: 0px;
   width: 100%;
   margin-top: -200px;
   text-align: center;
   min-width: 900px; 
 }
 /* end IE 5 hack */ 
	  
#wrapper {
	background-color: #fff;
	position: relative;
	text-align: left;
	width: 900px;
	height: 380px;
	margin: 0px auto;
	}

As we've already stated rules like 'position: absolute' in the first set of style rules, we don't need to repeat these, only redefine rules that we want to change. So far I haven't been able to replicate the vertical centering effect, but at least it centres horizontally.

Recent Posts

The Symbol Sourcebook

08 Jun 2018

Differences between Icon and Logo Design on This is HCD Podcast

10 Apr 2018

Twelve South PencilSnap

01 Apr 2018

The Infinite Canvas

09 Feb 2018

Blade Runner 2049

14 Oct 2017

iPad Pro Pencil loop

11 Oct 2017

Instagram Hickstagram

  • 23 Jun 2018

    Taking my ladyfolk out for a drink

  • 22 Jun 2018

    Lying next To Dan

  • 22 Jun 2018

    She can hear Callum, Samantha’s boyfriend, coming in…

  • 19 Jun 2018

  • 17 Jun 2018

    There’s something I love about this bit of road coming into Leafield

  • 09 Jun 2018

    Ride out to Kelmscott to test the new frame! Nice 40 mile loop in the sunshine ☺️

  • 09 Jun 2018

    The things you find on Freecycle. Tempted to reply that the council might want it back?

  • 09 Jun 2018

    Lovely morning dog walk at North Leigh Common

  • 07 Jun 2018

    Signs of wife

  • 30 May 2018

    O triptych

Contact us

Call Jon on +44 (0)7917 391536, email or tweet @hicksdesign.

Alternatively, pop in for tea and cake at the studio…

Hicks
Wenrisc House
Meadow Court
Witney, OX28 6ER
United Kingdom