1

The question is clear, I hope.

I have the body of the DOM (which should be any height, thinking to a user that reside the window) and I'd like to center (in vertical) an element (which can contain other children, but this doesnt mean).

Is it possible? Maybe using a table? I'd like to avoid Js...

markzzz
  • 44,504
  • 107
  • 265
  • 458
  • You may want to check out this similar question: http://stackoverflow.com/questions/10968726/best-practice-vertical-align-center-content-on-div – Josh Mein Jun 21 '12 at 12:43

2 Answers2

4

You'll need a proper markup. Something like this 

<html>
<body style="position:fixed; top:0px; left:0px;bottom:0px; right:0px;  margin:0px;">
    <div style='display : table; width : 100%; height : 100%'>
    <div style='display : table-row;'>
        <div style="border:solid; display : table-cell; vertical-align : middle">
            Hello
        </div>
    </div>
    </div>
</body>
</html>

Live Example (checkout my answer for this question)

There is another way too

<html>
    <body style='width : 100%; height : 100%'>
        <div style='position : absolute; width : 50px; height : 50px; margin : -25px 0px 0px 0px; top : 50%; border : 1px solid #000'>
        </div>
    </body>
</html>

Here, the extra div elements as seen in the earlier method can be avioded.

Live Example

Community
  • 1
  • 1
Ashwin Krishnamurthy
  • 3,624
  • 3
  • 25
  • 49
  • +1 It is interesting that you have to do all that. I have never tried to do it to the body itself and apparently there is a little more work when doing so. – Josh Mein Jun 21 '12 at 12:41
  • Thing is, you need the proper markup for vertical-align to work. So you have to mimic a `display : table`, a `display : table-row` and a `display : table-cell` – Ashwin Krishnamurthy Jun 21 '12 at 12:44
  • That is not necessarily true: http://jsfiddle.net/Sha6m/8/ I think the part that makes it so hard is the height:100%; – Josh Mein Jun 21 '12 at 12:44
  • Hmm.. funny. Yours seems to be working fine. But i have had problems with that, there are cases when it wont center properly so i always follow the strict markup. – Ashwin Krishnamurthy Jun 21 '12 at 12:47
  • By the way it is easier to read your code when the css is not inline. :) – Josh Mein Jun 21 '12 at 12:47
  • Lol.. I jus typed it fast :). I guess youre right. For a variable height i guess you would need a `display:table` to set things right and hence the ensuing markup. :) – Ashwin Krishnamurthy Jun 21 '12 at 12:48
  • My solution works for a set height. It becomes a little more difficult when you have height:100%; I believe that is when you may need to use your version. Thanks for teaching me something new. :) – Josh Mein Jun 21 '12 at 12:48
  • @JoshMein, Honored. I believe youve dispensed my fears when a stand-alone version of `table-cell` and `verical-align` are used. Setting the proper height does the job and reduces the markup. Thank you. – Ashwin Krishnamurthy Jun 21 '12 at 12:53
  • The second example is fabolous! So, body is "position:relative?". Because I see I can only put under body (which take the whole document size). A div with height:100% doesnt take the "whole" height... – markzzz Jun 21 '12 at 12:55
  • Nope.. the body is `position : static`. The Default value. – Ashwin Krishnamurthy Jun 21 '12 at 13:01
2

That's a tricky method I used. Note that wrapper gives height and wrapper > div gives width.

That should not work on IE...

<html>
<head>
    <style>
    html, body {
         height: 100%; width: 100%; margin: 0; display: table;
         vertical-align: middle
    }
    #wrapper {
         display: table-cell;
         height: 100px;
         vertical-align: middle;
         width: 100%;
    }
    #wrapper > div {
          width: 50%; margin: auto;
          border: 1px solid red
    }
</style>
</head>
<body>

<div id="wrapper">
    <div class="content">
        content there...
    </div>
</div>
</body>
</html>
Metal3d
  • 2,652
  • 1
  • 19
  • 28