bugl
bugl
HomeLearnPatternsSearch
HomeLearnPatternsSearch

Loading lesson path

Learn/CSS/CSS Foundations
CSS•CSS Foundations

CSS Center Align

CSS Centering Elements

With CSS, you can center elements (horizontally, vertically, or both) with several methods, depending on the type of element. I am vertically and horizontally centered.

Example

Center a div element using flexbox:.center {

display: flex;
justify-content: center;
align-items: center;
}

Horizontal Alignment

There are several ways to horizontally align elements: margin: auto

Formula

- Center block elements text - align: center
  • Center text inside elements float or position

Formula

- Left/right alignment

Vertical Alignment

Vertical centering can be achieved using modern layout techniques:

Flexbox

Formula

- Use align - items: center

Grid

Formula

- Use place - items: center
Position + Transform
  • For elements of unknown dimensions

Tip:

Flexbox is the most modern and recommended method for centering content both horizontally and vertically!

Previous

CSS display: inline-block

Next

CSS Horizontal Align