How to Center with CSS Flexbox — Every Case Covered

The most frequent cause of broken flexbox centering is placing the display: flex rule on the wrong element. Flexbox is a parent-child relationship: the flex container property must live on the parent, and it controls the layout of that element's direct children only. If you add justify-content: center to a child element, nothing will happen because that child is not a flex container with items to arrange.

Another common failure is forgetting that align-items requires vertical space to work in. When a flex container has no defined height — or inherits height: auto from its parent — there is no cross-axis space to distribute, so align-items: center has no visible effect. The fix is to give the container an explicit height, min-height, or ensure it stretches to fill its parent.

The flex-direction property also changes which axis each property controls. The default is flex-direction: row, meaning the main axis runs left to right. justify-content controls horizontal placement; align-items controls vertical placement. When you switch to flex-direction: column, the main axis becomes vertical — so justify-content now controls vertical placement and align-items controls horizontal. This trips up many developers when building stacked layouts.

Finally, place-items: center is not a Flexbox shorthand. It is valid in CSS Grid and sets both align-items and justify-items on a grid container. Using it on a flex container will not produce the expected centering because justify-items has no effect on flex containers. Always use the explicit justify-content and align-items properties when working with Flexbox, not place-items.

Open Chrome or Firefox DevTools and inspect the element you expect to be centered. Select the parent container — not the child — and look at the Styles panel. You should see display: flex listed in the computed rules. Chrome 88 and Firefox 71+ both show a purple or colored flex badge directly on the element in the Elements panel; clicking it opens the Flexbox inspector overlay that draws the main axis, cross axis, and free space as visual guides over the page.

In the Layout tab of Chrome DevTools, a Flexbox section lists every flex container on the page. Check the flex container's computed height. If it shows 0px or auto with no resolved value, the container has no height — add a fixed height, min-height, or make the container stretch via height: 100% through its parent chain.

Look at the flex items themselves. A common mistake is seeing justify-self: center on a flex item and assuming it will center the item — that property does nothing in a flex context. Only justify-content on the parent moves items along the main axis. Cross out suspect rules temporarily in the Styles panel by unchecking the checkbox to the left of each declaration, and watch whether the layout changes.

For mobile debugging, toggle device simulation in DevTools and check at 375px and 390px widths. A container that uses vh units may shrink unpredictably on mobile browsers that show or hide their address bar. Use svh (small viewport height) in modern browsers for consistent full-screen centering on mobile.

The standard 3-line flexbox center is: display: flex; justify-content: center; align-items: center on the parent container. That covers the vast majority of cases. The child does not need any additional properties to be positioned in the center of the parent.

For centering a single flex item when other items are present, use margin: auto on that one child. A flex item with margin-left: auto will be pushed as far right as possible; margin: auto expands in all directions and pushes the item to the center of the remaining free space. This technique is common for centering an icon in a toolbar while keeping other items at their natural positions.

For vertical centering when flex-direction is column, swap your mental model: justify-content now controls vertical alignment and align-items controls horizontal. So display: flex; flex-direction: column; justify-content: center; align-items: center centers both axes with a column layout. You still need a defined height on the container.

For the align-self property on a child — use it to override align-items for one specific item. If the parent has align-items: flex-start but you want one card centered, add align-self: center to that card. This does not affect any siblings.

For Grid as an alternative: display: grid; place-items: center is genuinely simpler for centering when you only have one child element. It sets both align-items and justify-items to center in one declaration. Prefer Flexbox when you need to arrange multiple children in a row or column; prefer Grid when you need precise two-dimensional placement or a single centered element.

Safari 14 and earlier have known issues with min-height on flex containers inside elements with display: flex and flex-direction: column. If you set min-height: 100vh on a flex column container in Safari, it may not pass height down to nested flex children correctly. The workaround is to set height: 100vh instead of min-height, or add flex: 1 on intermediate wrapper elements to explicitly distribute the available height.

On mobile, the 100vh value includes the browser chrome (address bar, navigation bar) in some browsers. This means a centered element positioned at 50vh may not visually appear in the center of the screen. Modern browsers support svh (smallest viewport height), lvh (largest), and dvh (dynamic) units. Use height: 100dvh for layouts that should track the visible viewport as the browser chrome shows and hides.

Images inside flex containers can overflow because images default to display: inline with their natural dimensions. Adding max-width: 100% to images inside a flex container prevents them from overflowing their flex track. For consistent behavior, set width: 100% and height: auto on images, or use object-fit: cover with explicit dimensions.

When a flex container wraps with flex-wrap: wrap, align-items only aligns items within each row, not across all rows. Use align-content to control spacing between multiple rows. align-content: center requires the container to be taller than the total height of all rows — exactly the same height requirement as align-items.

Internet Explorer 11 supports Flexbox but with several bugs and requires the -ms- vendor prefix for some properties. If you must support IE 11, test justify-content and align-items manually and consider a PostCSS autoprefixer. Most modern teams drop IE 11 support — global usage fell below 0.3% in 2023.

The single most repeated mistake is applying display: flex and the alignment properties to the element you want to center instead of to its parent. A flex container arranges its children. If .card has display: flex, it is arranging its own children — not positioning itself within its wrapper.

A close second is relying on text-align: center as a replacement for flex centering. text-align works on inline content within a block container. It does not move block-level children or flex items. A centered paragraph of text inside an off-center div still looks correct for the text but the div itself is not centered.

Using vertical-align: middle is also wrong outside a table-cell context. It is a property for inline and table elements. In a flex container it has no effect at all — not even an override. Developers from older CSS backgrounds often reach for it instinctively.

Setting justify-content: center without a defined height and then expecting vertical centering is another very common trap. When the container's height is determined by its content, there is no free space on the cross axis. Adding height: 300px or min-height: 200px immediately makes align-items: center work.

Finally, mixing up justify-content and align-items when using flex-direction: column. In a column flex container, justify-content moves items up and down; align-items moves them left and right. The labels are accurate descriptions of which axis the property controls relative to the flex direction, but muscle memory from row layouts gets in the way.

A related mistake is applying flex-direction: column to the wrong element in a nested layout. When a parent wrapper has flex-direction: column but the developer intended to center within a child container, centering properties on the parent govern the child's vertical stacking, not the internal centering of the child's own children. Always confirm which element is the actual flex container before adding centering properties, especially in deeply nested components.

Define centering intent in the parent only. Keep the child element's CSS focused on its own appearance — color, typography, border — and let the parent control positioning. This separation makes it easy to reuse the child in different containers with different alignment requirements.

Use a utility class for common centering patterns. A class like .flex-center with display: flex; justify-content: center; align-items: center; can be applied to any parent that needs its content centered, similar to how Tailwind's flex items-center justify-center works. Consistent naming prevents the same property from being rediscovered in every component.

Prefer min-height over height for flex containers that center content. A parent with height: 400px will clip taller children; min-height: 400px allows the container to grow if its content exceeds the minimum. This is especially important for centering within page sections that may contain dynamic content.

Always test centering at the smallest breakpoint you support. Content that centers correctly at 1280px may overflow or collapse at 375px if the flex container has no flex-wrap and the child has a fixed width. Add flex-wrap: wrap or use max-width constraints on children to make centering robust at all screen sizes.

Document the centering pattern in a comment when the CSS is non-obvious — for example, when you are using negative margin plus transform, or the spacer flex: 1 technique for centering one item in a multi-item row. Inline comments prevent the next developer from removing a style they do not understand and breaking the layout silently and unexpectedly.