Flash cards
Review the key moves
1/4
Core idea
What is the main idea behind CSS Center Align?
Lesson checks
Practice each idea before moving on
Short Mimo-style checks built from this lesson's code, terms, and sequence.
1Quick choice
Which statement best captures the main point of this lesson?
2Fill blank
Complete the missing token from the example code.
___: flex;3Order
Put the learning moves in the order that makes the concept easiest to apply.
Vertical Alignment
Horizontal Alignment
CSS Centering Elements
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
Formatted code
.center {
display: flex;
justify-content: center;
align-items: center;
}Live preview
Horizontal Alignment
There are several ways to horizontally align elements:
- margin: auto - Center block elements
- text-align: center - Center text inside elements
- float or position - Left/right alignment
Vertical Alignment
Vertical centering can be achieved using modern layout techniques:
- Flexbox - Use align-items: center
- Grid - 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!