css vertically centering a fixed positioning div

Question

I have the following HTML for a sort-of lightbox project.

<div id="lightbox">
  <img id="image" src="" />
</div>

that is using the following CSS:

#lightbox{
display:none;
position:fixed;
width:100%;
text-align:center;
z-index:600;
cursor:pointer;
left:0;
top:100px;
}

#image{
position:relative;
height:600px;
border:1px solid grey;
}

To have the image always in the horizontal center, I am simply using text-align:center on the wrapper div, so I am 100% sure it will be correct.

I am facing problems with the vertical centering and I am using a workaround of simply setting the top value in the #lightbox properties.

As you can see the height of the image is known, so it is easily doable in jQuery but I am looking for a pure CSS solution.

Any ideas? Thanks.

Answer 1

The best solution I've seen for both vertically and horizontally centering a position: fixed div is:

position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

Fiddle and source. You don't need to know the dimensions of the div and it doesn't require any container divs. The centered div's width can even be a percentage (which was what I was looking for when I found this solution).

Answer 2

Alternatively, you could try this (only works if you know the height of the image):

#image{
position:relative;
height:600px;
top: 50%;
margin-top: -300px; /* minus half the height */
border:1px solid grey;
}