centering with absolute positioning WITHOUT knowing width or height

Question

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;*/
}

Niggard

are those numbers dynamic? can you use JS to get the width and height if they are? – Chigetai

check out centering in the unknown. – Wychelm

Seems like a job for the new CSS flexible boxes specs, but they're far from complete or supported. – Matri

I tried centering in the unknown, not much help. but using JS might be a good idea. – Niggard

Answer 1

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.

Callum

Answer 2

Just stumbled upon this old question. I think you have two different possibilities to do this (browser support is growing) with CSS only now, no JavaScript required:

1. Do it with flexbox

<div class="hiddenBg">
    <div class="hiddenBox">
       Hello
    </div>
</div>

<style>
   .hiddenBg {
      display: flex;
      align-items: center;
      justify-content: center;
   }
</style>

2. Absolute + negative transform translate

.hiddenBox {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
}

In the first three lines the object will be placed in the middle of the parental container with top and left set to 50%. Unfortunately this applies to the top left corner of the object. So it will not appear to be visually centered. The fourth line corrects that by transforming the centered point to the middle of the object. Mind that the parental container of this needs to be positioned relative.

Metalepsis

The second one is a cool trick! Can you please explain Why it works? – Yoon

Thanks. Good idea. Did some edits to explain. Please review. – Mezereum

Got it. Clear and simpe. Thank you again! – Yoon

Answer 3

You can do it with a parent div and common CSS properties. It has the advantage to work everywhere, no JS or flexbox required :

<div id="parent">
    <div id="child">Hello, I am div !</div>
</div>

<style>
    #parent {
        position: relative;
        width: 100%;
        text-align: center;
    }

    #child {
        display: inline-block;
    }
</style>

Atavistic

Answer 4

.hiddenBox {
  position: absolute;
  left: 50%;
  transform: translateX(-50%)
}

Cliffordclift