CODEWITHSUNDEEP
css
loo
loo

Reputation: 707

position div center horizontal and vertical

i would like to center a popup div how can i do that browser friendly????

this is the original a bit to the left.

<div class="popLayerWrapper">
    <div id="addBookmarksLayer" class="popLayer" style="left:260px; padding:30px;">
        <div class="closeLayer" >close</div>
        <div class="layerContent"></div>
    </div>
</div>

Upvotes: 0

Views: 723

Answers (2)

Bredele
Bredele

Reputation: 115

I use this code to center an element in the center of the window viewport:

html {
  display: table;
  table-layout: fixed;
  width: 100%; 
  height: 100%;
}

body {  
  display: table-cell;  
  width: 100%; 
  height: 100%;
  vertical-align: middle;
  margin:0;
}

#center {
  margin: auto;
}

You will find a full example at this link (Bredele CSS bundle). I think it should work for your popup.

Olivier

Upvotes: 0

Tim Hoolihan
Tim Hoolihan

Reputation: 12396

Not sure I understand which part you want to center, but assuming the whole thing:

.popLayerWrapper {
   position: absolute;
   width: 40%;  /* could be anything */
   left: 50%;
   margin-left: -20%;  /* half of width */
   height: 40%;    /* again, could be anything */
   top: 50%;
   margin-top: -20%;  /* half of height */
}

Upvotes: 2

Related Questions