.modal {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
<div class="message-wrapper">
<div class="message">
<h2>Test</h2>
</div>
</div>
.message-wrapper {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background-color: rgba(0, 0, 0, 0.3);
z-index: 1;
}
.message {
background-color: #ffffff;
}