Box Model & Layout

CSS Align

Centering elements horizontally and vertically.

1Centering Techniques

Margin auto for horizontal block centering. Flexbox for easy vertical centering.

Example Code

css

.center-block {
  margin: 0 auto;
}
.flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

2Understand it in a real interface

Alignment is specific to the layout model. Text-align controls inline content within a block; it does not universally center the block itself. Flex and grid offer separate alignment controls, while automatic margins can center an appropriately sized block in normal layout.

3Try it yourself

Center the text inside a card, then center the card inside its parent. Use a different technique for each task. Add a row of controls and compare main-axis and cross-axis alignment so that the property names connect to the actual direction of the layout.

Finished reading?

Mark this topic as complete to track progress.

CSS Inline-block

Next Topic

CSS Text