How to vertically align a div in the body?

Question

I would like to vertically align a div (rectangle), this div doesn't have any parents, i created one (container) to use the vertical-align property but i could remove it if someone knows a better way.

I just want to center a rectangle into the body div (horizontally and vertically) and make it responsive.

Here is what i tried but it doesn't work (the rectangle stay close to the top of the window):

<html>
    <head>
        <style>
            .rectangle {
                width: 88%;
                height: 87%;
                margin: auto;
                padding:10px;
                background:red;
                display:inline-block;
                vertical-align:middle;
            }

            .container {
                text-align: center;
                height: 100%;
                width: 100%;
            }
        </style>
    </head>
    <body>
    <div class="container">
        <div class="rectangle">
        </div>
    </div>
    </body>
</html>

Is it possible to achieve only using CSS or do we need javascript?

possible duplicate of [Best way to center a
on a page vertically and horizontally?](http://stackoverflow.com/questions/356809/best-way-to-center-a-div-on-a-page-vertically-and-horizontally) — Jeroen, Aug 02 '13 at 10:29
If you know width and height why not to calculate margins yourself: `margin: 6.5% 6%` — Pavlo, Aug 02 '13 at 10:31
http://stackoverflow.com/questions/4802433/method-for-full-screen-vertically-centered-html-page — daniel__, Aug 02 '13 at 10:36

score 2 · Answer 1 · answered Aug 02 '13 at 10:34

There are a couple ways to go about this with CSS-only. Since you've tagged this as CSS3, we can use some newer approaches to achieve this. Also, Chris Coyer has done some great write-ups about vertical centering with CSS. Some links are:

http://css-tricks.com/centering-in-the-unknown/

http://css-tricks.com/centering-percentage-widthheight-elements/

If you know the height of the element you want to center, you can position it absolutely and account for it's width/height with negative margins.

Another way is to set up the element and body to use css display tables.

Another emerging option is the flexbox spec, which handles a lot of the heavy lifting for you. Some more information on flexbox can be found here:

http://css-tricks.com/using-flexbox/ http://css-tricks.com/snippets/css/a-guide-to-flexbox/

And an example of how one might mix flexbox with other styling:

http://css-tricks.com/replicating-google-hangouts-chat/

I personally like the translate option the best, but as flexbox support grows, this type of layout will be most likely easiest that way.

score 0 · Accepted Answer · answered Aug 02 '13 at 11:06

<html>
    <head>
        <style>
            .rectangle {

            background: #000;
            height: 200px;
            width: 200px;
            }

            .container {
                width: 100%; /* Firefox needs this */

            height: 100%; /* Height can be anything */

            /* WebKit (Chrome & Safari) */
            display: -webkit-box;
            -webkit-box-pack: center;
            -webkit-box-align: center;

            /* Firefox */
            display: -moz-box;
            -moz-box-pack: center;
            -moz-box-align: center;

            /* IE */
            display: -ms-box;
            -ms-box-pack: center;
            -ms-box-align: center;

            /* Native CSS */
            display: box;
            box-pack: center;
            box-align: center;

            background: red;

            }
        </style>
    </head>
    <body>
    <div class="container">
        <div class="rectangle">
        </div>
    </div>
    </body>
</html>

Internet Explorer 10 supports an alternative, the -ms-flex-align property. Firefox supports an alternative, the -moz-box-align property. Safari, Opera, and Chrome support an alternative, the -webkit-box-align property. Note: Flexible boxes are not supported in Internet Explorer 9 and earlier versions.

How to vertically align a div in the body?

2 Answers2