0

I need to center a modal with css. I used position:fixed; top:50%; left:50%; However, since the site has a fixed left side navigation bar, it does the positioning with respect to the main content div to the right. Can I do positioning with respect to the total browser width with css, ignoring the container div?

user3689167
  • 863
  • 1
  • 14
  • 28
  • 4
    Post your code here of what you did so far. Better if you could create a [demo](http://www.jsfiddle.net). – divy3993 Oct 26 '15 at 23:42
  • I figured it out by making a wrapper around the modal and setting it's position to 0,0. Then, I used margin: 0 for the modal to center – user3689167 Oct 30 '15 at 16:20

1 Answers1

1

Checkout new simplified version with comments.

#modal-overlay {
  /* stretch overlay to all screen and fix it */
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  
  /* place it higher by z-axis */
  z-index: 99999;
  
  /*align children to center with flexbox */
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  
  /* simple styling*/
  background: rgba(0, 0, 0, 0.8);
}
#modal {
  /* simple styling*/
  width: 400px;
  padding: 20px;
  background: #fff;
  font-size: 25px;
  text-align: center;
}
<div id="modal-overlay">
  <div id="modal">
    Hello world!
  </div>
</div>

More info:

  1. Flexbox
  2. Css positions
userlond
  • 3,632
  • 2
  • 36
  • 53