6

I have set up a modal for phots, so when i click on a small photo i get a larger photo up in a modal, the modal has position: fixed; and the modal-content has position: absolute; i can center it with margin: auto; left: 0; right: 0;but then the width goes all the way to the right and left, i want the modal content width to be the same as the photo inside it or the content of the modal-content

my code:

.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding: 30px;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */

}

.modal-content {
    background-color: #fefefe;
    position: absolute;
    top: 50px;
    margin-bottom: 30px;
    margin: auto;
    border: 1px solid #888;
}

.modalimg {
    position: relative;
    text-align: center;
}

.modalimg  img{
    max-width: 100%;
    max-height: 400px;
    margin: auto;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0; 
    position: relative;
    box-shadow: 0 0 20px rgba(0,0,0,0.4); 

}

its maybe a bit messy now but i have tried alot of different things with no luck..

3

5 Answers 5

9

This is what I use when I center an absolute-positioned element, this works for me all the time:

.absolute-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
3

here you are please

.element {
  position: absolute;
  top: 15px;
  z-index: 2;
  width: 40%;
  max-width: 960px;
  min-width: 600px;
  height: 60px;
  overflow: hidden;
  background: #fff;
  margin: 0 auto;
  left: 0;
  right: 0;
  background: red;
  color: #fff;
  text-align: center;
}
<div class="element">
  text..
</div>

1
.modal-content {
    background-color: #fefefe;
    position: absolute;
    top: 50px;
    left: 50px;
    right: 50px;
    bottom: 50px;
    border: 1px solid #888;
    }
0
1

to align absolute div to center left: 0; right: 0 text-align: center this will align the div in center.

2
  • 1
    If I'm not mistaken, text-align won't work on an absolute-positioned element. Commented Mar 16, 2017 at 8:47
  • it works. as here width i can see 100%, I am assuming you want to center the inside element? If you want to center the div itself, you can reduce the width in percentage.codepen.io/shshaw/full/gEiDt Commented Mar 16, 2017 at 8:54
1

Here's a possible solution that uses:

  • absolute positioning on the content container (.modal-content)
  • doesn't use absolute|fixed on the actual content

The content container (.modal-content) will grow along with its content. Finally, it's moved back to the middle using transform: translate(-50%, -50%);:

.modal {
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.4);
}

.modal-content {
    border: 1px solid red;
    position: absolute;
    top: 50%;
    left: 50%;
    border: 2px solid red;
    transform: translate(-50%, -50%);
}
<div class="modal">
  <div class="modal-content">
    <img src="//placehold.it/200x200" alt="">
  </div>
</div>

Demo

Try before buy

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.