centering with absolute positioning WITHOUT knowing width or height

css, css-position, overlay

Solution

You can do it with javascript. Dynamically get width and height of `.hiddenbox` and properly position it using technique you are familiar with. There's one more option to play with, check the example here:

body {
  margin: 0;
}

#fade {
  background: #ccc;
  width: 600px;
  height: 200px;
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}

#content {
  background: #fff;
  border: 1px solid #ff0000;
  padding: 20px;
  display: inline-block;
}

<div id="fade">
  <div id="content">
    Something goes here...
  </div>
</div>

View on jsFiddle

But in this example you need to know the exact width and height of parent container (`.hiddenBg` in your case), it won't work with % units.

If you are ok to use javascript for this task - tell us and possibly add `javascript` tag to your question. We can help you with that part of js code.

Problem

I am creating an overlay. There is a div that coats the whole page in 50% transparent black. Another div must be centered, vertically and horizontally to the screen. It must be absolutely positioned. Is there anyway to do this without knowing the height/width? It will change based on screen res. I am familiar with the absolute positioning centering techniques when you know the height and width, (i.e. left: 50%; margin-left: -150px; top: 50%; margin-top: -300px;)... But again, can I do this without knowing the height/width? Here is the code: ``` .hiddenBg { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: black; filter:alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity: 0.5; opacity: 0.5; z-index: 10000; /*display: none;*/ } .hiddenBox { position: absolute; left: 50%; margin-left: -200px; top: 50%; margin-top: -100px; width: auto; height: auto; background-color: #FF7F00; border: solid 10px white; z-index: 10001; text-align: center; /*display: none;*/ } ```

Original source