Center align content vertically and horizontally in CSS

Follow me on Twitter, happy to take your suggestions on topics or improvements

Center aligning content vertically and horizontally are usual requirement in any website. There are several ways to achieve it using CSS.

• using CSS transform
• using flexbox

CSS transform

.content {
  position: relative;
  top: 50%;
  left: 50%;
  // shifts or translate the center point (X, Y) by (X - 50% of outerWidth, Y - 50% of outerHeight)
  transform: translate(-50%, -50%);
}

Limitations

• It works very well for centering content block with fixed width in both directions ✅
• For non fixed width, the content block assumes 100% of parent's width. It expands the whole width of parent container horizontally. You can check this by removing width for content in codepen example ❌
• this technique won't work if the content is inline level element, it only works for block level elements ❌

Modern flexbox way

.parent {
  display: flex;
  // centering along main axis - X axis - Horizontal
  justify-content: center;
  // centering along cross axis - Y axis - Vertical
  align-items: center;
}

Note: main and cross axis depends on flex-direction property. By default flex-direction is row. If it is set as column, then main axis is Y and cross axis is X.

This approach works on almost every use cases perfectly

• fixed width of content block ✅
• non fixed width of content block ✅
• content can be inline level element or block level element ✅

Flexbox is so powerful and you can easily develop more styles and components using it. Its supported on all major browsers, no excuse to not using it 😊

Note: This article was originally written for my blog. I am republishing it here for the amazing DEV community.