CSS Center Align
Center elements
horizontally and vertically
CSS Centering Elements
With CSS, you can center elements (horizontally, vertically, or both) with several methods, depending on the type of element.
Example
Center a div element using flexbox:
.center {
display: flex;
justify-content: center;
align-items: center;
}
Try it Yourself »
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
Learn more about Horizontal 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!
Learn more about Vertical Alignment »
