I have a popup for my site styled using CSS and I can't for the life of me figure out how to center it. All the normal ways don't work because I need it to be centered no matter what width it is.
Here is the CSS for the background and the popup box:
.filterbox {
background-color: #000000;
display: none;
height: 100%;
left: 0%;
opacity: 0.5;
position: absolute;
top: 0%;
width: 100%;
z-index: 10;
}
.floatbox {
background-color: white;
border: 2px solid #FD6907;
display: none;
margin:0 auto;
min-height: 200px;
min-width:500px;
overflow: hidden;
padding: 10px;
position: absolute;
top: 30px;
left:30%;
z-index: 11;
-moz-border-radius: 15px;
border-radius: 15px;
-webkit-border-radius:15px;
}
And here is the div that goes inside this popup box.
#boxcontent {
height: auto;
width:100%;
left: 0pt;
margin-bottom: 50px;
min-height: 150px;
padding: 10px;
}
Currently it's absolutely positioned however I would like to know a more compliant way that will make the popup centered no matter what size the popup box is.
.floatbox{
width:600px;
margin-left:auto;
margin-right:auto;
}
Or whichever width you choose