<div class="flex">
<div>Center me</div>
</div>
body {
background-color: #E9E9E6;
font: 1.4em/1.3 Helvetica, Arial, sans-serif;
padding: 30px;
}
.flex {
display: flex;
border: 5px solid #CE454F;
border-radius: 10px;
width: 500px;
height: 300px;
align-items: center;
justify-content: center;
}
.flex > * {
border: 5px solid #526683;
border-radius: 10px;
background-color: #89A4BE;
padding: 10px;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.