0

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.

Cody Gray - on strike
  • 239,200
  • 50
  • 490
  • 574
MÖRK
  • 954
  • 11
  • 31
  • http://stackoverflow.com/questions/210717/using-jquery-to-center-a-div-on-the-screen – Joonas Apr 26 '12 at 09:16
  • text-align:center; doesnt work im afraid, i tried all the normal ways – MÖRK Apr 26 '12 at 09:37
  • You are going to need javascript. If its a popup, you are very likely to use javascript to handle some functionality, so why not let javascript handle centering as well? – Joonas Apr 26 '12 at 09:52

1 Answers1

1
.floatbox{
    width:600px;
    margin-left:auto;
    margin-right:auto;
}

Or whichever width you choose

IsisCode
  • 2,490
  • 18
  • 20