Ali Bahaari Ali Bahaari - 2 months ago 4x
CSS Question

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


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.