Back to all snippets
Library/CSS/Flexbox Centering
cssbeginnerlayoutflexboxcentering

How to implement Flexbox Centering in Css

Center elements horizontally and vertically with flexbox

Quick Answer

Set `display: flex; justify-content: center; align-items: center;` on the parent to centre any child both horizontally and vertically.

Code Snippet

1.center {
2  display: flex;
3  justify-content: center;
4  align-items: center;
5}

What is Flexbox Centering?

Flexbox centering with justify-content and align-items set to center is the modern standard for centering elements in CSS. It replaces older hacks like negative margins, absolute positioning, and table-cell tricks, and works reliably for both fixed and dynamic content sizes.

How It Works

  1. 1`display: flex` activates flexbox on the container.
  2. 2`justify-content: center` centres children along the main (horizontal) axis.
  3. 3`align-items: center` centres children along the cross (vertical) axis.
  4. 4The container needs an explicit height or `min-height` for vertical centering to take effect.

Common Use Cases

  • Page layouts - Center main content vertically in full-height sections
  • Card components - Center icon and text inside a card
  • Loading spinners - Center spinners over a container or the full viewport
  • Empty states - Center illustration and message when a list is empty

Key Benefits

  • Works regardless of child element size
  • Single class with two properties — minimal CSS
  • Supported in all modern browsers
  • Combines naturally with other flex properties

Common Mistakes to Avoid

  • Forgetting to give the container a height — without explicit height vertical centering has no space to work in.
  • Applying flex properties to the child instead of the parent container.
  • Using `align-content` instead of `align-items` — `align-content` only affects multi-line containers.

Quick Tips

  • Click the "Copy" button above to copy the code to your clipboard
  • This code is production-ready and can be used in your projects immediately
  • Check out related snippets below for more css examples

Frequently Asked Questions

What is the difference between justify-content and align-items in Flexbox?

`justify-content` aligns items along the main axis (horizontal by default). `align-items` aligns items along the cross axis (vertical by default). Both are needed for true two-dimensional centering.

Related Snippets

css
beginner
Truncate Text
Truncate text with ellipsis for single and multiple lines
texttypographyutilities
css
intermediate
Glassmorphism Effect
Create frosted glass effect with backdrop blur
effectsmodernui
css
beginner
Smooth Scrolling
Enable smooth scrolling behavior
scrollbehaviorux

About This Css Code Snippet

This free css code snippet for flexbox centering is production-ready and copy-paste friendly. Whether you are building a web app, API, or frontend interface, this beginner-level example will help you implement flexbox centering quickly and correctly.

All snippets in the Snippetly library follow css best practices and are tested for real-world use. You can adapt this code to work with React, Vue, Node.js, or any project that uses css.

Tags: layout, flexbox, centering  | Language: css  | Difficulty: beginner  | Category: CSS

Build Your Own Snippet Library

Organise your team's code snippets with Snippetly. Share knowledge and boost productivity across your organisation.

Get Started FreeBrowse More Snippets