CODEWITHSUNDEEP
cssmodal-dialog
user6571878
user6571878

Reputation:

How to make Modal in the center of screen due to absolute position?

I created a Modal for my framework. I created everything like HTML Codes, CSS Codes & JS Codes ..., It works very good !

My only problem is that I can't make it CENTER & RESPONSIVE ... This is my CSS Codes for Modal Div :

.ji-modal {
    width: 700px;
    height: auto;
    background-color: #FFF;
    border: 1px solid #CCC;
    position: fixed;
    top: 70px;
    left: 325px;
    display: none;
    z-index: 1000005;
}

I have read that If your width is fixed & your tag has a Absolute or Fixed Position, You can make it center by giving 50% to left ro right, But It doesn't work too ...

Any Help, Thanks ...

Upvotes: 33

Views: 109370

Answers (3)

christianAV
christianAV

Reputation: 149

Did you tried this:

.modal-content{
    position: relative;
    display: flex;
    flex-direction: column;
    margin-top: 50%;
}

Upvotes: -1

Toby
Toby

Reputation: 13385

Setting sizes in percentages is a good option, another option is to use transform:

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

This will move the modal to 50% from top and left, and then adjust it back based upon the dimensions of the modal itself. This isn't ideal for every situation, but it works well in many modal use cases.

Upvotes: 96

Oskar
Oskar

Reputation: 181

To make it responsive, instead try setting the width using % or vw units. Also, to center it horizontally you can use margin: 0 auto. Centering it vertically is a little more tricky, check out this answer for more on that.

Upvotes: 10

Related Questions