Deprecated: Assigning the return value of new by reference is deprecated in /home/hos/public_html/wp-settings.php on line 472

Deprecated: Assigning the return value of new by reference is deprecated in /home/hos/public_html/wp-settings.php on line 487

Deprecated: Assigning the return value of new by reference is deprecated in /home/hos/public_html/wp-settings.php on line 494

Deprecated: Assigning the return value of new by reference is deprecated in /home/hos/public_html/wp-settings.php on line 530

Strict Standards: Declaration of Walker_Page::start_lvl() should be compatible with Walker::start_lvl(&$output) in /home/hos/public_html/wp-includes/classes.php on line 594

Strict Standards: Declaration of Walker_Page::end_lvl() should be compatible with Walker::end_lvl(&$output) in /home/hos/public_html/wp-includes/classes.php on line 594

Strict Standards: Declaration of Walker_Page::start_el() should be compatible with Walker::start_el(&$output) in /home/hos/public_html/wp-includes/classes.php on line 594

Strict Standards: Declaration of Walker_Page::end_el() should be compatible with Walker::end_el(&$output) in /home/hos/public_html/wp-includes/classes.php on line 594

Strict Standards: Declaration of Walker_PageDropdown::start_el() should be compatible with Walker::start_el(&$output) in /home/hos/public_html/wp-includes/classes.php on line 611

Strict Standards: Declaration of Walker_Category::start_lvl() should be compatible with Walker::start_lvl(&$output) in /home/hos/public_html/wp-includes/classes.php on line 705

Strict Standards: Declaration of Walker_Category::end_lvl() should be compatible with Walker::end_lvl(&$output) in /home/hos/public_html/wp-includes/classes.php on line 705

Strict Standards: Declaration of Walker_Category::start_el() should be compatible with Walker::start_el(&$output) in /home/hos/public_html/wp-includes/classes.php on line 705

Strict Standards: Declaration of Walker_Category::end_el() should be compatible with Walker::end_el(&$output) in /home/hos/public_html/wp-includes/classes.php on line 705

Strict Standards: Declaration of Walker_CategoryDropdown::start_el() should be compatible with Walker::start_el(&$output) in /home/hos/public_html/wp-includes/classes.php on line 728

Strict Standards: Redefining already defined constructor for class wpdb in /home/hos/public_html/wp-includes/wp-db.php on line 306

Deprecated: Assigning the return value of new by reference is deprecated in /home/hos/public_html/wp-includes/cache.php on line 103

Strict Standards: Redefining already defined constructor for class WP_Object_Cache in /home/hos/public_html/wp-includes/cache.php on line 425

Deprecated: Assigning the return value of new by reference is deprecated in /home/hos/public_html/wp-includes/query.php on line 21

Deprecated: Assigning the return value of new by reference is deprecated in /home/hos/public_html/wp-includes/theme.php on line 623

Strict Standards: Redefining already defined constructor for class WP_Dependencies in /home/hos/public_html/wp-includes/class.wp-dependencies.php on line 15

Strict Standards: Redefining already defined constructor for class ngg_Tags in /home/hos/public_html/wp-content/plugins/nextgen-gallery/lib/nggallery.lib.php on line 479
Vdot Media - Vertically center content with CSS

Simply Put the agency blog


Warning: mktime(): It is not safe to rely on the system's timezone settings. You are *required* to use the date.timezone setting or the date_default_timezone_set() function. In case you used any of those methods and you are still getting this warning, you most likely misspelled the timezone identifier. We selected the timezone 'UTC' for now, but please set date.timezone to select your timezone. in /home/hos/public_html/wp-includes/functions.php on line 41

Warning: date(): It is not safe to rely on the system's timezone settings. You are *required* to use the date.timezone setting or the date_default_timezone_set() function. In case you used any of those methods and you are still getting this warning, you most likely misspelled the timezone identifier. We selected the timezone 'UTC' for now, but please set date.timezone to select your timezone. in /home/hos/public_html/wp-includes/functions.php on line 50

Warning: date(): It is not safe to rely on the system's timezone settings. You are *required* to use the date.timezone setting or the date_default_timezone_set() function. In case you used any of those methods and you are still getting this warning, you most likely misspelled the timezone identifier. We selected the timezone 'UTC' for now, but please set date.timezone to select your timezone. in /home/hos/public_html/wp-includes/functions.php on line 52

Warning: date(): It is not safe to rely on the system's timezone settings. You are *required* to use the date.timezone setting or the date_default_timezone_set() function. In case you used any of those methods and you are still getting this warning, you most likely misspelled the timezone identifier. We selected the timezone 'UTC' for now, but please set date.timezone to select your timezone. in /home/hos/public_html/wp-includes/functions.php on line 54

Warning: date(): It is not safe to rely on the system's timezone settings. You are *required* to use the date.timezone setting or the date_default_timezone_set() function. In case you used any of those methods and you are still getting this warning, you most likely misspelled the timezone identifier. We selected the timezone 'UTC' for now, but please set date.timezone to select your timezone. in /home/hos/public_html/wp-includes/functions.php on line 55

Warning: mktime(): It is not safe to rely on the system's timezone settings. You are *required* to use the date.timezone setting or the date_default_timezone_set() function. In case you used any of those methods and you are still getting this warning, you most likely misspelled the timezone identifier. We selected the timezone 'UTC' for now, but please set date.timezone to select your timezone. in /home/hos/public_html/wp-includes/functions.php on line 41

Warning: date(): It is not safe to rely on the system's timezone settings. You are *required* to use the date.timezone setting or the date_default_timezone_set() function. In case you used any of those methods and you are still getting this warning, you most likely misspelled the timezone identifier. We selected the timezone 'UTC' for now, but please set date.timezone to select your timezone. in /home/hos/public_html/wp-includes/functions.php on line 50

Warning: date(): It is not safe to rely on the system's timezone settings. You are *required* to use the date.timezone setting or the date_default_timezone_set() function. In case you used any of those methods and you are still getting this warning, you most likely misspelled the timezone identifier. We selected the timezone 'UTC' for now, but please set date.timezone to select your timezone. in /home/hos/public_html/wp-includes/functions.php on line 52

Warning: date(): It is not safe to rely on the system's timezone settings. You are *required* to use the date.timezone setting or the date_default_timezone_set() function. In case you used any of those methods and you are still getting this warning, you most likely misspelled the timezone identifier. We selected the timezone 'UTC' for now, but please set date.timezone to select your timezone. in /home/hos/public_html/wp-includes/functions.php on line 54

Warning: date(): It is not safe to rely on the system's timezone settings. You are *required* to use the date.timezone setting or the date_default_timezone_set() function. In case you used any of those methods and you are still getting this warning, you most likely misspelled the timezone identifier. We selected the timezone 'UTC' for now, but please set date.timezone to select your timezone. in /home/hos/public_html/wp-includes/functions.php on line 55

Vertically center content with CSS


Warning: mktime(): It is not safe to rely on the system's timezone settings. You are *required* to use the date.timezone setting or the date_default_timezone_set() function. In case you used any of those methods and you are still getting this warning, you most likely misspelled the timezone identifier. We selected the timezone 'UTC' for now, but please set date.timezone to select your timezone. in /home/hos/public_html/wp-includes/functions.php on line 41

Warning: date(): It is not safe to rely on the system's timezone settings. You are *required* to use the date.timezone setting or the date_default_timezone_set() function. In case you used any of those methods and you are still getting this warning, you most likely misspelled the timezone identifier. We selected the timezone 'UTC' for now, but please set date.timezone to select your timezone. in /home/hos/public_html/wp-includes/functions.php on line 50

Warning: date(): It is not safe to rely on the system's timezone settings. You are *required* to use the date.timezone setting or the date_default_timezone_set() function. In case you used any of those methods and you are still getting this warning, you most likely misspelled the timezone identifier. We selected the timezone 'UTC' for now, but please set date.timezone to select your timezone. in /home/hos/public_html/wp-includes/functions.php on line 52

Warning: date(): It is not safe to rely on the system's timezone settings. You are *required* to use the date.timezone setting or the date_default_timezone_set() function. In case you used any of those methods and you are still getting this warning, you most likely misspelled the timezone identifier. We selected the timezone 'UTC' for now, but please set date.timezone to select your timezone. in /home/hos/public_html/wp-includes/functions.php on line 54

Warning: date(): It is not safe to rely on the system's timezone settings. You are *required* to use the date.timezone setting or the date_default_timezone_set() function. In case you used any of those methods and you are still getting this warning, you most likely misspelled the timezone identifier. We selected the timezone 'UTC' for now, but please set date.timezone to select your timezone. in /home/hos/public_html/wp-includes/functions.php on line 55
January 31st, 2008 by Verne


Strict Standards: Non-static method nggallery::get_option() should not be called statically in /home/hos/public_html/wp-content/plugins/nextgen-gallery/nggfunctions.php on line 10

A convenient benefit of using tables is the ability to vertically center content within a cell using the valign attribute. Unfortunately, acheiving the same effect with CSS isn’t so convenient. So, as we continue to move towards tableless structures, there comes a need for a simple and valid CSS alternative. There have been a number of ways to approach this feat, but in this tutorial, I will lay out the technique we use to vertically center content using CSS.

The HTML

Three divs are required in order to pull this one off. Here’s an example of how we setup the divs.

<div id="container">
<div id=”position”>
<div id=”content”>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec laoreet egestas mi. Aliquam erat volutpat. Aliquam erat volutpat. Suspendisse potenti. Suspendisse potenti. Vestibulum mi nibh, hendrerit nec, feugiat vitae, feugiat a, nisl.
</div>
</div>
</div>

The #container div is used as the main reference point for centering the content. In other words, the content will be vertically centered against the height of the #container div.

The #position div is used to, naturally, position the content.

Finally, the #content div is used to encase the actual content that we are trying to center. This div is also used to correct the positioning of the content for Internet Explorer users (as you’ll see later).

The CSS

Here’s the CSS we apply to make it all come together:

<STYLE type="text/css">
#container { width: 100%; height: 100%; display: table; }
#position { display: table-cell; vertical-align: middle; width: 100%; text-align: center; }
</STYLE>

We’ve defined the height of #container to be the full height (100%) of the page. We could have just as easily given it a fixed height such as 500px. We’ve also added display: table and display: table-cell to #container and #position, respectively, which will tell it to mimic the properties of <table> and <td>.

You’ll notice that we haven’t applied any style to the #content div. This is because browsers like Firefox and Safari are able to use the uber handy vertical-align: middle property, making it almost just as easy as using tables. Using only the code we’ve shown thus far, our content should be nicely vertically centered on the page in all browsers except Internet Explorer, which doesn’t understand vertical-align: middle.

To correct this problem and ensure that our content is still vertically centered for IE users, we’ll apply the following conditional statements and extra bits of CSS.

<!--[if IE]>
<STYLE type="text/css">
#container { position: relative; }
#position { position: absolute; top: 50%; }
#content { position: relative; top: -50%; }
</STYLE>
<![endif]–>

The <!--[if IE]> … <![endif]–> tags tell the browser to only process this CSS if the browser being used is Internet Explorer.

When processed, the CSS places the top margin of the #position div halfway down the height of #container. However, this only places the content in the lower half of #container. So, to center it vertically, #content’s top is offset by -50%. That is, it is being shifted upwards a distance that is equal to 50% of its height. If you do the math and crunch the numbers in your head, you’ll find that this does a nice job of centering the content.

Live Demo

A live demo of this tutorial is available here. You can also download the demo page for your reference.

Tags: ,

102 Responses to “Vertically center content with CSS”

Leave a Comment