CSS: Center Aligning Text Vertically - Method 3

Another approach to vertically centering text is to change the display property of the container to table-cell and add the vertical-align property with the value middle. This method does not work with MS Internet Explorer.

Example

div#header {
vertical-align: middle;
display: table-cell;
height: 200px;
background-color: yellow;
}

<div>
My text
</div>

CSS: Center Aligning Text Vertically - Method 2

You can center text vertically by using absolute positioning on the child element and setting the top property to 50%. You might have to adjust the margin-top attribute to get the text exactly in the center.

Example

div#header {
position: relative;
height: 200px;
}

div#header span {
position: absolute;
top: 50%;
margin-top: -10px;
}


<div id="header">
<span>My text</span>
</div>

CSS: Center Aligning Text Vertically

The easiest way to center text vertically using CSS is to set the line-height to the same size as the container's height.

Example

//Add this to your STYLE tag or external CSS file
div#header {
height: 100px;
line-height: 100px;
}

<div id="header">
My text
</div>


UPDATE: Also see

• CSS: Center Aligning Text Vertically - Method 2
• CSS: Center Aligning Text Vertically - Method 3
  

Internet Explorer 8

MS Internet Explorer 8 was released on 19th March, with lots of new features and better standard compliance. You can get a copy from the IE website.

Changes in IE8 include removal of the WBR tag and CSS Expressions. You can still use Compatibility Mode by including the following META tag onto your page:
<meta http-equiv="X-UA-Compatible" content="IE=7">

IE-specific HTML/CSS

I've been using IE specific CSS overrides in my CSS experiments for stuff that handles differently in IE and Firefox. When creating a Fieldset in IE, I get a rounded border. This apparently is the simplest way to get a rounded border in IE. I added the CSS attributes for the rounded border into the style sheet for Firefox. Now, the visual difference between the rendering in IE and in Firefox is the padding so I had to serve a different CSS to each browser.

I didn't want to maintain two entirely different CSS files loaded through server-side scripting and using Javascript to change stylesheets didn't really appeal to me so I went with IE's ability to execute code within HTML comments (conditional execution/rendering).

The comment looks like this:
<!--[if IE]><style type="text/css">@import "ie_fixes.css";</style><![endif]-->

Internet Explorer reads the "if IE" and makes the style tag a part of the document while Firefox treats it as an HTML comment.