Centering Modal Dialog using Flexbox
Centering Modal using Flexbox
Overlay div has to be fixed.
<style>
* {
margin: 0;
padding: 0;
}
html {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
background: linear-gradient(to right, #57c1eb 0%,#246fa8 100%);
height: 100%;
}
body {
height: 100%;
box-sizing: border-box;
padding: 20px 50px;
}
.overlay {
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: rgba(0,0,0, 0.3);
}
.modal {
background: #FFF;
width: 400px;
height: 300px;
padding: 20px;
box-sizing: border-box;
text-align: center;
}
h1 {
font-size: 2rem;
}
p {
font-size: 1.6rem;
margin-top: 1.4rem;
}
.overlay{
display:flex;
justify-content: center;
align-items: center;
}
</style>
<body>
<div class="overlay">
<div class="modal">
<h1>Modal Heading</h1>
<p>Here is some modal content.</p>
</div>
</div>
</body>