CSS Beginner Live preview

Centre anything with Flexbox

The three lines of CSS that centre an element both ways.

Updated 5 Oct 2026 16 lines 1 min read

display: flex turns the parent into a flex container. justify-content centres along the main axis and align-items along the cross axis.

style.css

Download

.stage {
  display: flex;
  justify-content: center; /* horizontal */
  align-items: center;     /* vertical */
  height: 100vh;
  margin: -8px;
  background: linear-gradient(135deg, #0b3d24, #16a862);
}

.box {
  padding: 24px 32px;
  border-radius: 16px;
  background: #fff;
  color: #0b3d24;
  font: 700 1.2rem system-ui, sans-serif;
}

Not running

Run the preview when you are readyIt runs in an isolated sandbox with no access to this site or your account.

Make it your ownOpen the HTML, CSS and JavaScript in the Playground, change anything, and see the result instantly.

Edit in Playground

Related snippets

Browse CodeLab

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Profile card</title>
  <style>

Beginner Live preview

A responsive profile card

Build a clean profile card with semantic HTML and a few lines of CSS.

HTML

25 lines View snippet