20

I can horizontally align a div and all the content looks nice. Looking to vertical align a div that does not contain any tables. I tried setting margin positions to some negative values inside of the #container but that sort of worked. I know CSS isn't supporting this yet?

Here is my markup:

body
{
    background: #777; /* gray */
    text-align: center;
}

#container 
{ 
    margin: 0 auto;
    width: 968px;
    text-align: left;
}

#toptab
{
    background: #f77; /* red */
    height: 14px;
    width: 968px;
}

#middletab
{
    background: #7f7; /* green */
    width: 968px;
}

#data
{
    width: 948px; /* 948 for the box plus we need 20 more px to handle the padding */
    padding-left: 10px; 
    padding-right 10px;
}

#bottomtab
{
    background: #77f; /* blue */
    height: 14px;
    width: 968px;
}
<div id="container">
    <div id="toptab"></div>
    <div id="middletab">
        <div id="data">
            The quick brown fox jumped over the big red bear.
            The quick brown fox jumped over the big red bear.
            The quick brown fox jumped over the big red bear.
            The quick brown fox jumped over the big red bear.
            The quick brown fox jumped over the big red bear.
            The quick brown fox jumped over the big red bear.
            The quick brown fox jumped over the big red bear.
            The quick brown fox jumped over the big red bear.
            The quick brown fox jumped over the big red bear.
            The quick brown fox jumped over the big red bear.
            The quick brown fox jumped over the big red bear.
            The quick brown fox jumped over the big red bear.
        </div>
    </div>
    <div id="bottomtab"></div>
</div>

Run the snippet above and click "full page" to see how it currently looks. Basically, it looks great horizontally, but now I need it to also center vertically in the page.

The element that I want to align vertically is the #container div. The effect would force the entire div and all sub divs to not only be horizontally aligned but also vertically. I know this is possible and I know Andy Budd posted such a solution but it doesn't seem to work for me.

3
  • Do you mean vertically distributed/justified or just centering what's displayed vertically in the page? Commented Dec 15, 2009 at 19:28
  • @Eric the end result is the circular box with content should be in the middle of the page. As of right now as you see the content is centered but centered to the top only. I need to center it directly in the middle of the page.
    – JonH
    Commented Dec 15, 2009 at 19:31
  • As far as I've seen you have to do a bit of javascript unless you want a fixed-height page, which I doubt. Commented Dec 15, 2009 at 19:55

8 Answers 8

21

Unless you have the ability to explicitly set the height of your container (which doesnt look like that's the case), there is no cross browser solution for vertically centering your DIV container.

Using a table is completely viable, but you have noted that this cannot be used.

If javascript is an option, we could easily remedy this for you. A jQuery plugin already exists for vertically aligning a container.

(function ($) {
    // VERTICALLY ALIGN FUNCTION
    $.fn.vAlign = function() {
        return this.each(function(i){
            var ah = $(this).height();
            var ph = $(this).parent().height();
            var mh = (ph - ah) / 2;
            $(this).css('margin-top', mh);
        });
    };
})(jQuery);

And you would vertically align a DIV block like so:

$('#example').vAlign();

Taken from Simple Vertical Align Plugin.

6
  • @cballou There is no way that I'd be able to tell the height of the container, it could vary :(. But if I assume the most its going to be is 500px say. Using the markup provided what could I do ?
    – JonH
    Commented Dec 15, 2009 at 19:39
  • I tried this with no luck #container { margin:0 auto; width:968px; text-align: left; position:absolute; top: 50%; left: 50%; height:484px; margin-top: -9em; /*set to a negative number 1/2 of your height*/ margin-left: -15em; /*set to a negative number 1/2 of your width*/ }
    – JonH
    Commented Dec 15, 2009 at 19:45
  • @JonH: If it doesn't have a fixed height, you won't be able to make it vertically center without javascript. Commented Dec 15, 2009 at 19:48
  • @cballou +1 for that! My only question is I haven't worked much with JQuery. I understand the function needs to be within a head tag and do I just include jquery.js ?
    – JonH
    Commented Dec 15, 2009 at 20:03
  • Couldn't a vertical aligner be implemented via vanilla Javascript, with no need to utilize jQuery? Or is it just that using jQuery makes it easier?
    – JAB
    Commented May 30, 2012 at 20:07
8

Have a look at Vertical Centering With CSS or Vertically center content with CSS or CSS Vertical Centering. Method 3 of first reference is the same as CSS vertical center using float and clear.

And it's surely a good idea to test the result with a service like browsershots.org


EDIT: I modified your CSS and markup to implement Method 3:

css:

* {
  margin:0;
  padding:0;
}

html,
body {
  height: 100%;
}

body {
  text-align:center;
}

#floater {
  float: left;
  height:50%;
  margin-bottom: -100px;
}

#container
{
  clear:both;
  position: relative;
  margin: 0 auto;
  width:968px;
  text-align: left;
  height: 200px;
}

...

markup:

<body>
<div id="floater"></div>
<div id="container">

...

The drawback I see in this method is that with CSS you have to know in advance the height of your content, so that you can apply a negative margin of half this height to the floater. In the example I chose 200px.

See it in action.

8
  • I don't need any articles I've read plenty. I can't seem to get it to work with negative margin values.
    – JonH
    Commented Dec 15, 2009 at 19:32
  • If themeforest is ever unavailable, this response will be inadequate. Do you mind migrating the instructions over into your answer, and give credit to the original authors. That way people don't have to bounce from page to page to weigh the value of your response?
    – Sampson
    Commented Dec 15, 2009 at 19:32
  • @Jonathan > good point although I don't like ripping stuff from others :/ Commented Dec 15, 2009 at 19:40
  • funnily enough, I got upvoted by @JohnH for the links, and while I was busy implementing one of the techniques linked I got downvoted Commented Dec 15, 2009 at 20:18
  • Not by me gregory!!! I thank you for your time and effort..I wish I could accept 2 answers!
    – JonH
    Commented Dec 15, 2009 at 20:22
2

There are a few ways to do this, all with compromises.

  • Use position:absolute, a fixed height, and overflow:auto.
  • Use display:table, display:table-cell, and vertical-align:middle
  • Use javascript

I think option #2 is pretty good.

edit: I don't think option 2 will work in IE. You may be stuck with javascript if you want to keep the height dynamic.

2
  • Compromises cross browser compatibility: the whole IE family to be precise. Commented Dec 15, 2009 at 19:36
  • @cballou, ya I just thought of that and was editing my post as you were leaving your comment :P Commented Dec 15, 2009 at 19:38
2

With pure CSS, this is only possible if the div has a fixed height. You can then position it absolute and set its top and left to 50% and the margin-top and margin-left to the negative half of its width and height respectively.

Here's an SSCCE, just copy'n'paste'n'run. The border is purely presentational, the remaining styles are required.

<!doctype html>
<html lang="en">
    <head>
        <title>SO question 1909753</title>
    </head>
    <style>
        #content {
            position: absolute;
            width: 300px;
            height: 200px;
            top: 50%;
            left: 50%;
            margin-left: -150px; /* Negative half of width. */
            margin-top: -100px; /* Negative half of height. */
            border: 1px solid #000;
        }
    </style>
    <body>
        <div id="content">
            content
        </div>
    </body>
</html>

If there is no means of a fixed height, then you'll need to grasp Javascript and live with the fact that client will see the div quickly being shifted to middle during page load, which might cause a "wtf?" experience.

0
1

Make a container div with style display: table and use the style vertical-align: top on inner elements that are display: inline-block

Working demo at http://jsfiddle.net/uzcrt/

0

If your main container's height is fluid, your only reliable choice is to use JavaScript ("reliable" is debatable here, of course). In JavaScript, you must first find the height of the container, then the window height and adjust the top offset accordingly. Here's how you'd do it in jQuery:

$(function() {
    $(window).resize(function() {
        var top = $(window).height() / 2 - $('#content').height() / 2;
        top = top < 0 ? 0 : top;
        $('#content').css('top', top);
    });
    $(window).resize();
});

And the CSS to make it work:

#content {
    position: absolute;
    /* Everything else is optional: */
    width: 960px;
    margin: 0 auto;
}

And the HTML:

...
<body>
    <div id="#content">Content here</div>
</body>
</html>

That's still quite simple, and will work if the user has JavaScript enabled.

1
  • My only gripe with this function is it will only properly work if the element is a direct child of the BODY tag. The plugin I posted utilizes it's parent container for calculating the centered position. Commented Dec 15, 2009 at 19:56
0

I think it is possible to do it without display: table.

this is the example:

HTML:

<div class="notificationArea">
    something
</div>

CSS:

.notificationArea
{
    position: absolute;
    top: 50%;
    bottom: 50%;
    right: 50%;
    left: 50%
}
2
  • What do you mean? There's a display: table rule in your CSS and it the div isn't centered vertically anyway... Commented Mar 5, 2011 at 22:19
  • The demo was showing another example for some reason. I replaced it by the acctual code.
    – Rasto
    Commented Mar 7, 2011 at 10:57
0

CSS class to align a element in middle of the screen:

.middle{
    position: absolute;
    top: 50%; /*50% from top*/
    left: 50%; /*50% from left*/ 

    /*remove 50% of element width and height to align the element center in the position*/
    transform: translateY(-50%) translateX(-50%); 
}

Now, add this class to HTML element

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.