Home/ Questions/Q 6530631
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-25T09:46:44+00:00

I try to center a div on my page. It should use just relative

  • 0

I try to center a div on my page. It should use just relative values, so its size depends just on the window size.
I found a solution and it centers the box, but it seems that the margin isn’t calculated correctly. Instead the size of the body gets bigger then the window. In the following example firebug tells me that the box #container has size 1265×335 on my screen. When inspecting #content its size is 506×134 and 2px boarder on each side, which matches my calculation. But the top margin is 316.

Have I got something wrong?
The margin should be 25% of 335, right?
How can I fix this?

Here’s the HTML:

<body>
  <div id="container">
    <div id="content">
      nothing...
    </div>
  </div>
</body>

And here the CSS:

html {
  height:            100%;
}

body {
  height:            100%;
  margin:            0em 0em 0em 0em;
}

#container {
  height:            100%;
}

#content {
  text-align:        center;
  width:             40%;
  height:            40%;
  margin-top:        25%;
  margin-left:       auto;
  margin-right:      auto;
  margin-bottom:     auto;
  border:            2px solid black;
}
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    From http://www.w3.org/TR/CSS2/box.html:

    The percentage is calculated with respect to the width of the generated box’s containing block. Note that this is true for ‘margin-top’ and ‘margin-bottom’ as well.

    So you get 25% of 1265 which explains the behavior you are seeing. Unfortunately, I don’t have any solutions to offer.

    Edit: CSS3 makes this statement dependent on whether the containing block is horizontal (you would want it to be vertical). I don’t think that any browsers implement the required block-progression property however (it might have unintended side-effects anyway).

    • 0