How to center modal in screen?

Question

I have bootstrap modal when fire the modal it show on top center of page even when scroll page content down I can't see the modal dialog because its on top of page how can center it on screen.

.modal{position:fixed;top:0;right:0;bottom:0;left:0;z- index:1050;display:none;overflow:hidden;outline:0}

This should help - https://stackoverflow.com/questions/19026884/flexbox-center-horizontally-and-vertically — Hari Reddy, Jul 24 '21 at 22:56

Abdelrahman Hatem · Answer 1 · 2021-07-24T22:58:56.983

1

Update your HTML with the following code

.modal
 .modal-dialog.modal-dialog-centered

Or remove this style from modal element

{position:fixed;top:0;right:0;bottom:0;left:0;z- index:1050;display:none;overflow:hidden;outline:0}

And update your CSS with the following code

.modal-dialog {
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
  }

edited Jul 24 '21 at 22:58

answered Jul 24 '21 at 22:52

Abdelrahman Hatem

1,028
1
9
20

Did you try the two solutions ? – Abdelrahman Hatem Jul 24 '21 at 23:55
thank you > yes i tried . nothing make it center screen – Amr Melegy Jul 25 '21 at 14:59

score 0 · Answer 2 · answered Jul 24 '21 at 22:50

0

I usually display a container div with grid, and place my modal in it:

.containerDiv {
    display: grid;
    width: 100vw;
    height: 100vh;
    place-items: center;
    background: transparent;

}

answered Jul 24 '21 at 22:50

Pedro Henrique

181
3
11

could you provide the output? – Pedro Henrique Jul 24 '21 at 23:39

How to center modal in screen?

2 Answers2