Developer Tools New Tool

Free Online CSS Centering Generator for Every Method

Say what you are centring, a box, some text, an icon beside a label, an overlay or a whole page, and in which axis, and the page lists every method that actually works for that case with the trade-off of each. The preview has a height control, because most centring bugs are a container with no spare room.

Free Forever Nothing Uploaded Every method compared Runs in your browser

Free Online CSS Centering Generator for Every Method

Advertisement Slot (Top Banner) Google AdSense Unit • Responsive Banner

CSS Centering Generator Everything happens in this tab. Nothing you paste is sent anywhere.

Preview

Centre me

container 220px tall both axes

CSS

What and where Centring Axis Container height 220px

Methods that work for this case the cost is on the second line

Pick a method to see it applied.

Buy Us A Coffee

Enjoying WizTools123? Help keep our server infrastructure 100% free and open for everyone.

Buy Us A Coffee

Sponsored Content (Below Tool) Google AdSense Placement

How to Centre Anything in CSS

A few steps, and nothing is uploaded.

Say what you are centring A box, some text, an icon beside a label, an overlay or a whole page. The answer genuinely differs, which is why this is the first question.

Pick the axis Horizontal alone is usually easy. Vertical is where things go wrong, and both together has its own set of methods.

Choose a method Only the methods that work for that combination are listed, each with what it costs. Selecting one applies it to the preview immediately.

Shrink the container Drag the height down until the box no longer fits. That is the state most centring bugs are actually in, and each method fails differently.

What to Know About Centring in CSS

Including the two that waste the most time.

vertical-align: middle almost never does what people expect. It does not centre a block inside its parent. It only aligns inline-level boxes against each other within a single line box, and it aligns the middle of the box with the middle of the parent's x-height, not the middle of the parent. So it can nudge an icon against neighbouring text, which is a real use, and it works on table cells where it aligns cell content. Everywhere else it appears to do nothing, because there is no line box for it to act in. For a block inside a container, use flex, grid or align-content.

transform: translate(-50%, -50%) can blur text. If the element's size is an odd number of pixels, half of it is not a whole pixel, so the element is painted on a half-pixel boundary and the browser antialiases the text. It is subtle but visible on thin fonts at normal weight. The cures are an even width and height, rounding the size, or using a method that does not involve a fractional translate: flex, grid place-items, or absolute with inset: 0 and margin: auto. The last one needs a known width and height but produces integer positions.

Vertical centring needs the container to be taller than its content. align-items: center distributes free space, and a container that has sized itself to its content has none, so nothing appears to happen. This is the most common report of "centring does not work". Give the container a height, a min-height, or make it a flex or grid item that gets stretched, and the same rule starts behaving. Drag the height control on the preview down to see this happen deliberately.

This page writes the CSS; it does not inspect your layout. It cannot see your real markup, so it cannot tell you which ancestor is collapsing or which flex item is refusing to grow, and it does not read an existing rule back into the controls. The preview is a clean two-element case, which is useful for learning the method and for copying the rule, but the failure in your own page may come from a parent that this tool never sees.

Key Features & Capabilities

What this tool does, and what it deliberately does not.

Methods, not one answer Every approach that works for your case, listed side by side.

The cost of each What the method needs and what it breaks, on the second line.

A height you can shrink Drag the container shorter and watch each method fail differently.

Real preview The rule is applied to real elements, so nothing is faked.

Copyable CSS Container and item rules written out with plain class names.

Runs in your browser Nothing is sent anywhere. The page works with the network off.

About the CSS Centering Generator

Centring in CSS has a reputation it half deserves. Horizontally centring a block has been one line since the nineties. Vertically centring anything was genuinely awkward until flexbox, and the old workarounds survive in enough tutorials that people still reach for vertical-align or a negative margin and then wonder why the result moves when the text changes length.

This page asks the two questions that decide the answer: what are you centring, and in which axis. An overlay pinned over a card has different options from a line of text, and a whole page has different options again because the container is the viewport. Only the methods that apply are shown, each with the condition it needs and the thing it costs you, so the choice is made on the trade-off rather than on which snippet came up first.

The height slider is the part that matters most. Nearly every real centring bug is a container that has no spare vertical space, so align-items: center has nothing to distribute and appears to be ignored. Being able to drag the container shorter and watch each method behave differently teaches the underlying rule faster than any amount of prose, and it also shows which methods overflow and which clip.

Frequently Asked Questions

Flex against grid, absolute methods, and why vertical centring fails.

Either works and the difference is small. display: grid; place-items: center is the shortest thing in CSS that centres in both axes, and it does not affect the child's sizing. Flexbox with align-items and justify-content is two properties but is more familiar and easier to extend when a second child arrives. If you are only ever centring one element, grid is tidier.

Because the container has no free space to distribute. If its height comes from its content, the content already fills it. Add a height or min-height, or make sure the container is itself being stretched by its own parent. On a page-level container, min-height: 100dvh is usually what you want, since 100vh is wrong on mobile browsers with a retracting toolbar.

It is still the right answer when the element has no known size and cannot be a flex or grid item, for example an overlay inside a component you do not control. Otherwise flex or grid is cleaner, because the transform method takes the element out of flow, can blur text on a half pixel, and conflicts with any other transform you might want on that element.

A recent addition: align-content now works on a plain block container, not just on flex and grid. So display: block; align-content: center vertically centres the in-flow children without changing the display type at all, which means nothing else about the layout shifts. Support is good in current browsers but not in older ones, so treat it as a progressive improvement over a flex container rather than a replacement yet.

Put them in an inline-flex container with align-items: center and a gap. That aligns the two boxes by their centres and spaces them without a margin hack. vertical-align: middle can get close, but it aligns against the x-height of the text rather than its centre, so the result shifts whenever the font or the line height changes.