Blog
#react
#css
#javascript
#mongodb

Center align content vertically and horizontally in CSS

April 07, 2019 β€’ 🍿 1 min read β€’ Edit this post on Github
Follow me on twitter. I share quick tips, my reading list and also about free workshop and webinars around web and mobile development everyday.

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 😊

Wanna become a Pro Engineer!

Weekly, practical advice on how to become a better Engineer. Read by 210+ engineers, managers, and founders.

Share:

Made with ❀️ in Tallinn, Estonia

Paramanantham Harrison's DEV Profile