center div regardless of changing browser zoom

Question

I have a modal that I resized and looks like this at zoom 80% of my browser:

My problem is when I increase or decrease my browser zoom, my modal does not adjust automatically with my browser zoom and it becomes like this :

Here is my CSS code :

.resizeModal {
    width: 99vw;
    right: 500px;
    position: relative;
}

Is there anyway to automatically center my interface whether I increase or decrease my browser zoom?

Did you tried [this](https://stackoverflow.com/questions/42121150/css-centering-with-transform) or [this one](https://stackoverflow.com/a/39636815/7186622)? — Ah Hu, Jan 05 '23 at 16:05

score 2 · Answer 1 · answered Jan 05 '23 at 16:06

Try using the margin auto to automatically center:

.resizeModal {
    width: 99vw;
    right: 500px;
    position: relative;
    margin: auto;
}

If the first method doesn't work for you, you can combine it with position absolute and all borders to 0 as follows: position: absolute; /* Position the element absolutely */

  .resizeModal {
        width: 99vw;
        position: absolute; 
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
  }

Hope this helps!

Unfortunately it does not change anything :( – Achraf Jan 05 '23 at 16:40 — Achraf, Jan 05 '23 at 16:40

center div regardless of changing browser zoom

1 Answers1