Flexbox Centering Patterns

Center elements horizontally and vertically using flexbox with justify-content and align-items properties.

CssConfig ManagementUpdated: 2025-01-15

Code

.center {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

.center-both {
  display: flex;
  place-items: center;
  min-height: 100vh;
}

Related Examples

CSS Backdrop Filter Glass Effect
CSS Calc for Dynamic Sizing
CSS Clip Path Shapes
CSS Color Mix Function
CSS Container Queries

Report a problem with this exampleOpens a pre-filled issue on GitHub.