Centering

On this page

So some notes on centring in CSS.

Using grid

An easy way to centre both horizontally and vertically is simply:

<div>grid centering</div>

div {
    display: grid;
    place-content: center;
}

This works on plain text or with child elements.

You can use place-items too. For one element it works the same. But for several elements they will be spaced out along the vertical axis. Using place-content keeps them all together near the centre.

If you add grid-auto-flow: column; then multiple items will be laid out side by side rather than vertically.

For more in depth info on centering with grid see CSS Revolution.

For more using grid to centre see CSS Revolution

With flexbox

With flex box you can center text inside it’s container using

div {
  display: flex;
  justify-content: center;
  align-items: center;
}

But this is about centering…

Without grid or flexbox.

1. Using line-height

Method: set the line-height to the same height as the container. Set margins to zero and the text will be centred.

Can be improved by using CSS custom properties so that both the height and line height change at the same time BUT generally not recommended and easily broken.

2. Using display: table

Set the outer div to display: table; and the inner div to display: table-cell and vertical-align: middle.

.outer {
    display: table;
}
.inner {
    display: table-cell;
    vertical-align: middle;
}

Generally not recommended though.

3. Absolute Positioning

So using positioning and transform together:

.outer {
    position: relative;
    height: 400px;
}
.inner-box {
    position: absolute;
    top: 50%;          /* based on outer box size */
    left: 50%;
    transform: translate(-50%, -50%); /* based on the inner-box size */
}

Works well and recommended.

4. Using inset

The inset property is short hand for top, bottom, left and right.

.outer {
    position: relative;
    height: 400px;
}
.inner-box {
    position: absolute;
    width: 200px;
    height: 200px; /* if not set inset: 0; sets every corner at zero. */
    inset: 0;   
    margin: auto;
}

There appears to be a conflict here. The width and height conflict with the position set by inset. But the inset defines the space the inner-box is in. When margin: auto; is applied we can see the space is in fact the whole of the outer box.

Verdict: great solution for when using absolute positioning.

5. Margins and Padding

To horizontal alignment uses an old solution: the inner box uses margin: 0 auto.

The vertical alignment just adds equal padding to top and and bottom:

.outer {
    padding: 200px 0;
}
.inner-box {
    width: 600px;
    margin: 0 auto;
}

It’s possible to use this method to vertically align on a full page using calc and vh units but a little tricky:

padding-block: calc(50vh - calc(var(--inner-box-height) / 2));

.outerbox {
    width: min(450px, 100%);
    height: 230px;
    border: solid 1px #fff5;
    background-color: #1111;
}
.gridbox {
    display: grid;
    place-content: center;
}
.flexbox {
    display: flex;
    justify-content: center;
    align-items: center;
}
.outer {
    position: relative;
}
.inner-box {
    position: absolute;
    height: 5em;
    max-width: 250px;
    inset: 0;
    margin: auto;
    outline: dotted 1px #fff3;
}