<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;
  
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.