Seven reliable ways to centre an element, each shown live: grid with place-items, flexbox with justify and align, margin: auto in a flex parent, absolute positioning with translate, inset: 0 with margin: auto, line-height for a single line of text and align-content on a plain block.
The shortest way to centre anything in both directions: display: grid and place-items: center on the parent. It works for one child of any size and needs nothing on the child itself.
Flexbox centres with two properties: justify-content for the main axis and align-items for the cross axis. It is the natural choice when the parent already lays out a row of items and you want them centred as a group.
In a flex or grid container, margin: auto on the child absorbs all free space on every side, which centres it in both directions. It is handy when only one child of several should be centred.
The classic overlay technique: top and left at 50 percent move the element's corner to the centre, and translate(-50%, -50%) moves it back by half its own size. Use it when the element must float over other content, such as a play button on an image.
View code
<div class="ctr4"><span>Over the image</span></div>
An absolutely positioned element with inset: 0, a fixed width and height and margin: auto is centred by the browser's own sizing rules, with no transform. It suits fixed-size dialogs and badges.
For a single line of text in a fixed-height box, text-align: center and a line-height equal to the height still work, with no layout model at all. It breaks as soon as the text wraps, so use it only for short labels such as badges and avatars.
Newer browsers let align-content: center work on an ordinary block container, so vertical centring no longer needs flex or grid. Older browsers ignore it and show the content at the top, which is a harmless fallback.
display: grid; place-items: center on the parent centres one child in both directions with two declarations and nothing on the child. It is the right default for most cases.
Flexbox for groups
When several items should be centred together in a row or column, justify-content and align-items on a flex parent do it while keeping their spacing.
Absolute centring for overlays
Use top: 50%; left: 50%; transform: translate(-50%, -50%) only when the element must sit over other content, such as a play button on a video poster.
Horizontal only
To centre a block horizontally in normal flow, give it a width (or max-width) and margin-inline: auto. For text, text-align: center on the parent.
Frequently asked questions
Which method is best?
Grid with place-items for one element; flexbox for a group; absolute for overlays.
Why is my element not vertically centred?
The parent probably has no height. Centring needs space; give the parent a height or min-height.
Does align-content work without flex or grid?
In current browsers, yes, on block containers. Older browsers ignore it.