Centering an unknown width Lightbox - html

Question

I've looked at some other threads, but nothing seems to work. I'm trying to center a lightbox of an unknown width in the center of the page (horizontally). Any help would be appreciated. The code is as follows.
HTML
<div class="backdrop"></div>
<div class="box">
<div class="close">x</div>
<img src="../pics/placeholder.png">
</div>
CSS
.backdrop {
position: absolute;
text-align: center;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
background: #000;
opacity: .0;
filter:alpha(opacity=0);
z-index: 50;
display: none;
}
.box {
position: absolute;
top: 20%;
width: auto;
height: auto;
background: #ffffff;
z-index: 51;
padding: 2px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 0px 0px 5px #444444;
-webkit-box-shadow: 0px 0px 5px #444444;
box-shadow: 0px 0px 5px #444444;
display: none;
}
.close {
position: absolute;
padding-left: 5px;
padding-top: 5px;
margin-left: 98%
margin-top: 4px;
cursor: pointer;
font-family: sans-serif;
}

Answer 1

• To center an element horizontally with position: relative use:
.element {
position: relative;
display: inline-block;
margin: 0 auto; /* We don't care about 0, but we do care about auto. */
}
• To center an element horizontally with position: absolute or position: fixed use:
.element {
position: fixed; /* Lightboxes usually use position: fixed. */
left: 50%;
transform: translateX(-50%);
}