Center modal horizontally without jquery - html

Question

I am working on a modal in a react app, the width is set to auto and the position is fixed, I am trying to get it centered in the middle of the screen horizontally.
.Modal {
position:fixed;
width: auto;
z-index: 500;
align-content: center;
background-color: rgba(255, 255, 255, 0.889);
border: 1px solid #ccc;
box-shadow: 5px 5px 5px black;
padding: 0px;
font-size: 12px;
box-sizing: border-box;
transition: all 0.3s ease-out;
}
I have tried a few of the solutions that come up in stack overflow when searching to center the modal.
The main issue I am having is that this modal is above other elements on the z-index and if I change the position to absolute, as most of the examples suggest, the items that have been rendered below it on the z-index get shifted down the screen.
This doesn't work for me.

Answer 1

Try adding margin:0 auto; to your css and remove position:fixed.

Answer 2

Adding "margin: 0 auto;" is not going to work on a item with position: fixed.
Either lose the position fixed and do margin: 0 auto;
Or
Set the left position on (50% - width element / 2).
But i guess the first solution is the easiest one.

Answer 3

because your modal is position fixed, you need to use left or right css properties to change the horizontal position of your modal. But you have 'width' auto, which will not work because the width can vary. The easiest way would be to wrap the modal in a parent div, like the following
.modal-parent {
position: fixed;
display: flex;
justify-content: center;
align-items: center;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
}
.modal {
padding: 40px;
background: white;
}
<div class='modal-parent'>
<div class='modal'>
</div>
</div>
or if you don't want a parent div, you can just give it a static width, and the height can vary:
.modal {
position: fixed;
padding: 40px;
box-sizing: border-box;
top: 0;
left: calc(50% - 150px);
width: 300px;
background: teal;
}
<div class='modal'>
</div>