0
CODE:
*{
  margin:0px;
  padding:0px;
}
body{
  font-family:sans-serif;
  width:1024px;
  height:700px;
  border:1px solid green;

  //margin:0 auto;

  margin-left:auto;
  margin-right:auto;
  margin-top:auto;
  margin-bottom:auto;
}

1.i expected a centered box from all sides , but top part of the box model is at beginning of body, if i explicitly set margin-top:20px, boxmodel is moved down, but why top part doesnt align automatically like others.

2.i also didnt get what auto value "DOES" to achieve centering

  1. in case of margin:0 auto; // what is the unit of 0?px,em or pt.
violet kiwi
  • 695
  • 2
  • 10
  • 19

3 Answers3

3

Vertical alignment in Css is such a fun and painful topic. This stackoverflow queston is the best concise explanation I have seen regarding why vertical alignment can be so painful

As to your 1st question, the reason you can't vertically align using margins is explained below in the quote.

... the nature of document flow and element height calculation algorithms make it impossible to use margins for centering an element vertically inside its parent. Whenever a vertical margin value is changed, it will trigger a parent element height re-calculation (reflow), which would in turn trigger a re-center of the original element... making it an infinite loop.

As to your 2nd question, margin auto achieves horizontal centering by calculating the width of the child container in relation to its parent's width. Then it does simple math to add an even amount of margin to the left and right of the child container, enforcing horizontal centering.

As for 2nd question Part B,

margin: auto is the same as the following:

margin-top: auto;
margin-bottom: auto;
margin-right: auto;
margin-left: auto;

where as margin: 0 auto is the equivalent to the following:

margin-top: 0;
margin-bottom: 0;
margin-right: auto;
margin-left: auto;

A solution to achieve vertical centering

There are some options that you can utilize however to achieve vertical alignment despite the limitations. The easiest is to leverage a table. With tables, one of the few strong points of them is that using the vertical-align property actually behaves as you would expect when enforced inside of a table. So you can do something like the following:

<body>
    <table style="width: 100%; height: 100%">
         <tr>
              <td>
                   <div id="verticallyCenteredContent" style="vertical-align: middle">
                      OMG it's vertically aligned
                   </div>
              <td>
         <tr>
    <table>
<body>

There are two other common methods that I demonstrated in this jsfiddle.

Useful article that demonstrates a number of scenarios and approaches for achieving vertical centering - Vertical Centering with Css

Cheers!

Community
  • 1
  • 1
Matthew Cox
  • 13,566
  • 9
  • 54
  • 72
0

At first, use css to horizontal centering the "Div". After that is using javascript to centering vertical. See demo on jsfiddle HTML:

<div class="center">Div content</div>

CSS:

.center {
    font-family:sans-serif;
    width:300px;
    height:300px;
    border:1px solid green;
    margin: 0 auto;
    text-align:center;
}

JS (JQuery):

$().ready(function () {
    $(".center").css("margin-top", ($(window).height() - 300) / 2);
});

See demo on jsfiddle

JamesN
  • 387
  • 1
  • 9
0

Here is one more resource on CSS margin issue. http://techslate.net/looking-at-css-margins/

ajishkumar
  • 11
  • 2