Center Container

Horizontally and vertically center a container using Flexbox.

layout

flexbox

Preview

Loading preview...

HTML

<div class="center-container">
  <div style="background:#2E2E2E;color:#fff;padding:8px 16px;border-radius:4px;">
    Centered
  </div>
</div>

CSS

.center-container { 
  display: flex; 
  justify-content: center; 
  align-items: center; 
  height: 100px; 
  width: 100%;
  background:#f5f5f5; 
}