Vertical Centering With CSS

Posted 6 years, 5 months ago at 8:26 pm. 7 comments

There are a few ways to center vertically. In terms of block level elements, the methods are quirky. Inline elements are much simpler to center:

If you know the height of your containing div, and the height of your inner centered div,  or, if you the height of your inner div does not matter, then vertical aligning is simple.  However, if you are vertically centering anything that is variable, such as text, vertical centering is more complex and require hacks.

The HTML used in our examples:

<div id="containingBlock">
<div>
<p>This sentence will change in each example</p> </div>
</div>

Note: I will post an entry on vertical centering of text soon

Mathematical Method for known heights:

When you know the height of the containing element, and the height of the element being vertically centered, simply use math to figure out the height of the margins on the inner element.

#containingBlock {display: block; height: 200px;}
#containingBlock div {height:50px; margin: 75px 0;}

The green outlined div is vertically centered in all browsers.

As is evident in the above example, this method really only works for images or other media when you know the exact height of your content. This method should not be used for containing text as a developer really never knows how much text will be contained in the box in the end, and the font size: users should be allowed to increase font size.  In our example, the text does not take up the height alloted to the paragraph, so it is not vertically centered, but the containing div (i made the background grey) is centered..

Block level vertical centering via the table display method:

Vertically centering block level elements should be simple simply by using display: table; and vertical-align: middle.  Unfortunately, IE6 and IE7 do not understand the value of table and table-cell as values of the display property.

The CSS for CSS compliant browsers:

#containingBlock {display: table; height: 200px; position: relative; overflow: hidden;}
#containingBlock div {display: table-cell; vertical-align: middle;}

Rendering of the above code: (borders have been added so you can see the effect, and div id is actually unique) has the anticipated look in Firefox, Safari and other CSS compliant browsers, but not in IE, including IE7.:

Works in FireFox and Opera

The CSS for IE6 and IE7:

#containingBlock {height: 200px; position: relative; overflow: hidden;}
#containingBlock div { position: absolute; top: 50%;}
#containingBlock div p {position: relative; top: -50%;}

Rendering of the above code: (borders have been added so you can see the effect):

Works in IE6 and IE7

The concept is that the outer content which is relatively positioned and has a defined height contains an absolutely positioned div that starts 50% from the top of the container div.  The absolutely positioned div, in turn, contains a relatively positioned element that has as it’s middle the top of the absolutely positioned div.  Look at the colors in IE, and if the above sentence didn’t make sense, it will.

Vertical Alignment Table Display Hack


#containingBlock {display:table; height: 200px; position: relative; overflow: hidden; }
#containingBlock div {*position: absolute; top: 50%; display: table-cell; vertical-align: middle;}
#containingBlock p {*position: relative; top: -50%;}

Works in IE6 and IE7, Firefox, Safari, etc., but doesn’t validate

Vertically Centering Fluid elements within a page (useless, except for useless splash pages):

html, body, #containingBlock {height: 100%; position:relative; }
#containingBlock div {height: 50%; position: absolute; top: 25%; }

7 Comments

  1. As the YouTube video tutorials are posted here same like I also embed YouTube video code at my own web page Vertical Centering With CSS | vertical-align.com , since it is straightforward to get embedded code.
    Tobacco Pipes For Sale http://ctdonut.com/marlboro/

  2. Since the admin of this web page is working, no hesitation very quickly it will be renowned Vertical Centering With CSS | vertical-align.com , due to its feature contents.
    Marlboro Stock http://vonderhain.com/marlboro/newport-100s_c1

  3. Asking questions are really nice thing if you are not understanding something completely, but this piece of writing Vertical Centering With CSS | vertical-align.com offers nice understanding yet.
    Growing Tobacco http://ctdonut.com/marlboro/marlboro-red-wholesale_c3

  4. Hi, i believe that i saw you visited my weblog thus i got here to go back the favor?.I’m trying to in finding
    things to enhance my web site!I suppose its good enough to use a few of your ideas!!

  5. Great blog! Is the theme personalized or have you download it from somewhere?
    A design like yours with some simple tweeks would actually make my blog jump out.
    Please tell me where you got your design. Kudos

  6. I feel this is certainly on the list of most important info for me.

    And i am satisfied studying your article. But wanna remark on some
    common issues, The site taste is wonderful, the articles
    is truly great : D. Excellent activity, cheers

  7. Does your website have got a contact page? I’m having problems locating it but, I’d want to send you an email.
    I’ve got a bit of suggestions for the blog you may well be interested in hearing.
    In any case, great blog and so i look forward to seeing it grow after a while.


Leave a Comment/Question