CSS

Centering Content Vertically and Horizontally with Flexbox

Learn how to perfectly center any element, whether it's text or a div, both horizontally and vertically within its parent container using simple CSS Flexbox properties for robust layout control.

.container {
  display: flex;
  justify-content: center; /* Centers horizontally along the main axis */
  align-items: center; /* Centers vertically along the cross axis */
  min-height: 100vh; /* Example: Occupy full viewport height */
  border: 1px solid #ccc;
}

.centered-item {
  padding: 20px;
  background-color: #f0f8ff;
  text-align: center;
  color: #333;
  font-family: sans-serif;
}

How it works: This snippet provides the most common and robust way to center content using Flexbox. By setting `display: flex` on the parent container, `justify-content: center` aligns items along the main axis (horizontally by default), and `align-items: center` aligns them along the cross axis (vertically by default). This achieves perfect centering regardless of the item's size.

Centering Content Vertically and Horizontally with Flexbox

Need help integrating this into your project?