Demon Tech Roadmap

CSS

CSS Align

CSS centers and aligns elements horizontally and vertically.

Read Time

5 min read

Difficulty

Beginner

Last Updated

Jun 15, 2026

Version

v1.0.0

Introduction

CSS provides multiple ways to center text and elements. You can center text easily using text alignment. To center a physical block element, developers set an exact width and use auto margins.

Syntax

1/* center alignment */
2.box {
3  margin: 0 auto;
4  width: 50%;
5}

Example

1/* this centers a container */
2div.center {
3  margin: auto;
4  width: 300px;
5  border: 2px solid blue;
6}

Key Points

The `text-align: center` property centers inner text.
The `margin: auto` property horizontally centers block elements.
Centering a block requires a defined width.
Flexbox provides simpler centering tools today.

Up Next

Continue your journey with the next topic.

Go to CSS Combinators ❯