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

Question

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 ...

score 93 · Answer 1 · edited Jul 30 '16 at 15:14

93

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.

edited Jul 30 '16 at 15:14

Alex

8,461
6
37
49

answered Jul 30 '16 at 15:13

Toby

12,743
8
43
75

10

Should note that one situation that this does NOT work is on mobile. Any text fields in the dialog are practically unusable in iOS (something relating to the translation). – Jared G Apr 17 '18 at 02:56

score 10 · Accepted Answer · answered Jul 30 '16 at 15:08

10

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.

answered Jul 30 '16 at 15:08

Oskar

181
2
9

Thanks Oskar, I used 90% for width & Because my DIV is absolute, I put 5% to make it center ... – Jul 30 '16 at 15:10

score -1 · Answer 3 · answered Oct 18 '19 at 07:53

-1

Did you tried this:

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

answered Oct 18 '19 at 07:53

christianAV

149
1
4

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

3 Answers3