Free · Fast · Privacy-first

CSS Flexbox Centering

Centering elements in CSS has an unusually long history of workarounds compared to most layout problems: negative margins paired with absolute positioning, table-cell display tricks, line-height hacks for single-line text, and transform translate offsets that required JavaScript to maintain. Flexbox replaced all of them with a consistent three-property solution that works reliably at any container size and any child dimension. FixTools generates the exact centering ruleset you need, whether you are centering a single child element inside a hero banner or stacking multiple children vertically in the middle of a modal dialog. The output is copy-ready CSS that drops onto any container element and produces predictable centring behaviour the first time, without trial and error.

⚡ Use Tool Now How it works

Cost: Free forever
Sign-up: Not required
Processing: In your browser
Privacy: Files stay local

⚡

Generates the three-property centering ruleset instantly

🔒

Handles single-child and multi-child centering separately

✨

Live preview confirms centering at any container size

CSS Tool

Grid Flexbox Builder

All processing happens in your browser — your files are never uploaded to any server.

🚀Open Grid Flexbox Builder

100% Free · No account · Works on any device

Why Centering Was Difficult Before Flexbox and How Three Properties Solve It

Before Flexbox arrived as a mainstream layout system, vertical centering in CSS required one of several hacks chosen based on the context of the element being centred. Absolute positioning with top: 50% paired with a negative margin equal to half the element height worked only for elements with fixed, known heights, which limited it to icons and small widgets. The table-cell approach required wrapping elements inside display: table and display: table-cell containers, which polluted the HTML and broke semantic markup for screen readers. The line-height trick worked only for single-line text and broke the moment the content wrapped to a second line. None of these approaches adapted gracefully to dynamic content where the height of the centred element was unknown at design time. Developers frequently had to choose the technique that was least broken for the situation rather than the one that was actually correct, and the lack of a first-class centering mechanism was one of the most commonly cited frustrations with CSS layout for well over a decade.

Flexbox solves both horizontal and vertical centering with exactly three properties applied to the parent container. Setting display: flex activates the Flexbox layout model on that element. Setting justify-content: center distributes children along the main axis, which is horizontal in a default row-direction container. Setting align-items: center positions children along the cross axis, which is vertical in a row-direction container. Together, these three properties centre any child element regardless of its dimensions, with no knowledge of the child size required and no media query overrides for different content lengths. The container does not need a fixed height: the centering works whether the container is 100px tall or 100vh, whether it stretches to fill the viewport or shrinks to wrap a paragraph of text. This works in every modern browser without vendor prefixes and has worked that way since around 2015.

Centering a single child element and centering multiple children stacked vertically require slightly different approaches in Flexbox, though the building blocks are the same. For a single element, the three properties above work directly: the lone child sits precisely in the middle of the container at any size. For multiple children that should stack vertically in the centre, add flex-direction: column to the container. This switches the main axis to vertical, so justify-content: center now centres the stack vertically and align-items: center centres each individual item horizontally within the container. Adding a gap value between items controls spacing in the stack without resorting to margin hacks. This four-property combination is the standard pattern for centred hero sections, modal dialog content, empty state messages, sign-in forms, loading screens, and any vertically stacked content that needs to sit in the middle of its container.

The mental model that makes Flexbox centring stick is the axis swap that happens when flex-direction changes. In row direction, justify-content controls horizontal and align-items controls vertical; in column direction, the two properties swap roles. Internalising this lets you reason about centring without consulting documentation: identify the main axis, pick the appropriate distribution and alignment values for that axis, and the layout falls into place. The generator reinforces the model by labelling each control with its current effect, so you do not have to remember which axis is which while you build. Once the centring works in the preview, you can copy the ruleset and trust it to behave the same way in production, which removes a category of layout bugs that used to consume disproportionate amounts of debugging time.

MDN: CSS Flexible Box Layout CSS Tricks: A Complete Guide to Flexbox

How to use this tool

💡

Open the Flexbox Generator, set justify-content to center and align-items to center. For stacked children, also set flex-direction to column. Click Copy CSS and paste onto your container element.

How It Works

Step-by-step guide to css flexbox centering:

1
Select the container element
Identify the parent element that should contain the centered content, such as a section, div, or article that wraps the elements you want to centre. The Flexbox properties go on this container, not on the child being centred, which is the most common mistake when people first encounter Flexbox centring. Make sure the container has an explicit height or min-height before continuing, since vertical centring needs vertical space to work within.
2
Set justify-content and align-items
In the generator, set justify-content to center and align-items to center. The live preview immediately shows children sitting in the middle of the container both horizontally and vertically. These two property values are the heart of Flexbox centring and they work together by controlling the main axis and cross axis respectively. Confirm the preview matches your expectation before continuing, especially for containers with constrained heights.
3
Add flex-direction column for stacked children
If you are centering multiple children that should stack vertically rather than sit on one row, set flex-direction to column. The preview updates to show the children stacked and centred both horizontally and vertically. This step is unnecessary when centring a single child element. Adding a gap value at the same time controls spacing between the stacked items without needing to add margin to each individual element, which produces cleaner CSS.
4
Copy and paste the ruleset
Click Copy CSS to copy the complete container ruleset, including display flex, the alignment values, the flex-direction if you set one, and any gap value. Paste it onto your container element in your stylesheet. The output is plain CSS with no vendor prefixes required for modern browsers, and it slots into any framework or styling solution without modification. Verify the result in your actual page after pasting to confirm everything is centred as expected.

Real-world examples

Common situations where this approach makes a real difference:

Hero section with heading and button

A landing page hero contains an H1, a subheading, and a CTA button stacked vertically and centred inside a full-viewport-height section. Setting flex-direction: column with justify-content: center and align-items: center on the hero stacks the three elements vertically and centres the entire stack within the full-height hero container. Adding gap: 24px gives consistent spacing between items without applying margin to individual elements, which keeps the CSS shorter and easier to maintain. The result works at any viewport size from a 320px phone to a 4K monitor without any media query intervention.

Modal dialog content

A confirmation modal needs its icon, headline message, and button row centred inside the dialog box. A column-direction Flexbox container with both justify-content and align-items set to center places all three elements precisely in the middle of the modal at any dialog size. The centring adapts automatically if the message text wraps to multiple lines on a narrower modal width or in a translated language with longer strings. No JavaScript is needed to recalculate positions after a content change, which makes the modal robust against the kinds of dynamic content updates that broke older centring approaches.

Empty state placeholder

A data table that can have zero rows shows an icon and a friendly message when there is no data to display. Wrapping the empty state in a Flexbox container with justify-content: center, align-items: center, and flex-direction: column centres the placeholder at any table height, whether the table is 200px tall on mobile or 600px tall on desktop. The same pattern applies to empty search results, empty inboxes, zero-state dashboards, and any feature that occasionally has nothing to show. The centring is robust against the wide range of container heights a real product encounters.

Loading spinner overlay

A full-screen loading overlay needs its spinner centred both horizontally and vertically while the page fetches data in the background. Setting the overlay to display: flex with justify-content: center and align-items: center centres the spinner at any viewport size on any device, with no fixed positioning maths and no JavaScript-driven repositioning required. The three-property approach works equally well whether the overlay covers the full viewport using position: fixed or covers just a single panel using position: absolute inside a relatively positioned wrapper, which makes it the standard pattern for spinners across modern applications.

When to use this guide

Use this when you need to center an element both horizontally and vertically inside its container using Flexbox, without calculating offsets or using positioning hacks.

Pro tips

Get better results with these expert suggestions:

Give the container an explicit height for vertical centering to work

The align-items: center declaration centres items along the cross axis only when the container is taller than the natural content height. If the container has no height set, it shrinks to fit the content exactly and the centring has no visible effect because there is no extra vertical space to distribute. Add min-height: 100vh for full-viewport hero sections, height: 400px for fixed-height components, or another explicit height value to the container before expecting vertical centring to appear in the browser.

Use align-self to override centering on individual children

The align-items: center declaration applies uniformly to every child in the container. To push one specific child to the top or bottom while keeping its siblings centred, add align-self: flex-start or align-self: flex-end to that single child element. The align-self property overrides the parent align-items value for that one element only, without affecting siblings or requiring a separate wrapper. This is the cleanest way to handle the common case of a header element that should sit at the top while the rest of the content stays centred.

Prefer gap over margin for spacing stacked centered items

When centring stacked children inside a column-direction Flexbox container, use the gap property on the container instead of margin-bottom on each child. The gap property does not add space after the last item, which prevents an extra strip of whitespace at the bottom of the container that would visually offset the centred stack and make it look slightly higher than it should. Gap spacing is also cleaner to maintain because adding or removing children does not require any margin adjustments.

Test centering at both small and large container heights

A hero section might be 100vh on desktop but only 300px on mobile, and the same centring properties produce visibly different layouts at those two heights. Check that justify-content: center looks correct at both ends of the range your project supports. At very small container heights, tightly packed centred items can look cluttered and overflow the container, so consider reducing the gap value or hiding non-essential items at narrow breakpoints to keep the centred stack from spilling out.

FAQ

Frequently asked questions

Apply three properties to the parent container element: display: flex, justify-content: center, and align-items: center. This combination centres any child element both horizontally and vertically inside its container. The parent needs an explicit height or min-height for vertical centring to have any visible effect, because Flexbox needs vertical space to distribute. No properties need to be added to the child element itself, which makes this pattern reusable across many different content types. The same three properties work for centring a single child, a group of children that should sit on one row, or a single complex component such as a card with internal layout of its own.

The align-items: center declaration controls cross-axis positioning, which is vertical in a row-direction container. If the container does not have a height greater than the natural content height, there is no vertical space to centre within and the property appears to have no effect at all. The fix is to add an explicit height or min-height to the container. A common value is min-height: 100vh for full-viewport centring such as a hero section, or a fixed height value such as 400px for components like modal dialogs and cards. Once the container has vertical space to distribute, the centring becomes visible immediately.

Add flex-direction: column to the container along with justify-content: center and align-items: center. This switches the main axis from horizontal to vertical, so justify-content now controls vertical distribution and align-items controls horizontal alignment within the container. The children stack vertically in source order and the entire stack sits in the middle of the container. Use the gap property to add consistent spacing between the stacked children without resorting to margins. The combination of these four properties is the standard pattern for centred hero sections, sign-in forms, empty states, and any other vertically stacked content that needs to sit in the middle of its container.

The justify-content: center declaration centres items along the main axis of the Flexbox container, which is horizontal in a row-direction container and vertical in a column-direction container. The align-items: center declaration centres items along the cross axis, which is perpendicular to the main axis. To achieve centring in both dimensions simultaneously, you need both properties together on the same container. Switching the flex-direction value between row and column swaps which physical axis each property affects, but the relationship between justify-content as the main-axis property and align-items as the cross-axis property always remains the same.

Yes. Use justify-content: center alone to centre horizontally in a row-direction container without affecting vertical positioning. Use align-items: center alone to centre vertically, though this still requires an explicit container height to be visible. You do not need both properties together if you only need single-axis centring. A common example is a navigation bar that uses align-items: center to vertically centre its content within the header height but uses justify-content: space-between to distribute the logo and links to opposite edges. The two properties are independent and can be used separately or together depending on the layout needs.

Yes. Each grid cell can independently become a Flexbox container without any conflict between the outer Grid layout and the inner Flexbox layout. Place display: flex with justify-content: center and align-items: center on the grid cell element itself, or on a wrapper element inside the cell, and the children will be centred within that cell. This is a common pattern for centring icons, labels, or small content groups inside dashboard stat cards that are positioned by an outer Grid layout. Grid handles the macro placement of the cards, Flexbox handles the micro alignment within each card, and the two systems coexist peacefully.

No meaningful performance difference exists between Flexbox centring and other centring methods for typical UI elements. The browser calculates all layout in a single pass regardless of the technique used, and modern layout engines are heavily optimised for both Flexbox and Grid. Flexbox centring is preferred not for performance reasons but because it is predictable, requires no knowledge of child dimensions, and does not break when content size changes between renders. Older methods such as absolute positioning paired with negative margins fail silently when child size changes, which made them a constant source of bugs in dynamic interfaces.

Yes. Flexbox centring with display: flex, justify-content: center, and align-items: center works in all modern browsers without vendor prefixes. Chrome, Firefox, Safari, and Edge all support it fully and have done so for many years. For Internet Explorer 11 support, the -ms-flexbox prefix is needed and some edge cases such as nested flex containers behave slightly differently from the modern specification. IE11 global market share is below 0.5% and continues to decline, so most projects no longer include IE11 prefixes in their build output, which simplifies the generated CSS considerably.

Apply display: flex with justify-content: center and align-items: center to the relatively positioned parent that contains the absolutely positioned child, but note that absolute positioning takes the child out of the Flexbox flow, so the centring properties no longer affect it. A simpler approach is to skip absolute positioning altogether and let the Flexbox container handle the centring through normal flow. If you must use absolute positioning, the modern alternative is to combine position: absolute with inset: 0 and margin: auto on the child, which centres it within the relatively positioned parent regardless of the parent's layout system.

Yes. CSS Grid offers an even more concise centring syntax: display: grid combined with place-items: center centres the child both horizontally and vertically in a single property declaration. This works because place-items is a shorthand for align-items and justify-items, both of which take a center value. For pure centring with no other layout requirements, the Grid approach uses fewer properties than the equivalent Flexbox solution. Both methods work in all modern browsers and produce identical visual results, so the choice between them is mostly stylistic preference rather than capability difference.