JWS Docs - Centering elements, CSS properties and values

The centering of everything

For many years the centering of all things element and text wise has been a bit of a bug bear for many a designer / developer, but that's now a thing of the past!

We're happy to say it has never been easier than it is now, regardless of any comments or jokes you might see from some, about it still being impossible unless you use their favourite CSS framework of course.

Now before anyone shouts at us we're not knocking the use of CSS frameworks as they are the solution for some, but also a bit over the top for other website scenarios. Let's also take a moment and think about what properties those framework utility classes use to center your elements anyway, as most likely the same as what are included here! So if you only need the odd extra bit of centering (or other utility class), its probably better if you add the odd line of CSS yourself. Your website performance will definitely thank you!

What's your element?

How we centre items can depend on what type of element it is and it's default behaviour, where it is and also what effect we are trying to achieve. So are the elements:

Block, stack on top of each other like building blocks

Inline, flows in a horizontal line

Inline-block, takes block elements and stacks them horizontally

Flex, designed for one-dimensional layouts, layouts in a single direction (either row or column)

Grid, designed for two-dimensional layouts, layouts in both rows and columns

Are you trying to target a parent element e.g. a containing <div>, or a child element e.g. a <p> within a <div> as this will effect what properties we use to center it too.

Way's to center

So lets take a look at how we can get to the center of things, sometimes with just a single line of code!

Text-align

Is probably one of the most common centering properties used for a long time as it has been widely available across browsers since 2015. It can set the horizontal alignment of inline-level content inside a block element. So as it's name suggests is ideal for aligning text especially centering short blocks of text or headings.

<div>
<h4>Centering Text Elements</h4>
<p>This paragraph and heading are by default left aligned at the moment</p>
</div>

The above h4 will be aligned left by default. But if we add this single CSS property and value, either within a class or by targeting the element selector.

.center_this_text {
text-align: center;
}
/* In this example we used a class to target one heading 
though you could target all h4 headings instead */
h4 {
text-align: center;
}

We're using the .class as we don't want to target any other h4's we may put into this page or site.

<div>
<h4 class="center_this_text">Centering Text Elements</h4>
<p>By adding the class center_text the heading above will now be text-align: center; in the browser</p>
</div>

Centering Text Elements

By adding the class center_text the heading above will now be text-align: center; in the browser

Text-align has many other values too for all your text alignment needs

/* Keyword values */
text-align: start;
text-align: end;
text-align: left;
text-align: right;
text-align: center;
text-align: justify;
text-align: match-parent;

/* Block alignment values (Non-standard syntax) */
text-align: -moz-center;
text-align: -webkit-center;

/* Global values */
text-align: inherit;
text-align: initial;
text-align: revert;
text-align: revert-layer;
text-align: unset;

Vertical-align

The vertical-align property is used to align inline or inline-block elements vertically within their line box. It's commonly used to align text within an element, or to align an element e.g. an icon relative to its surrounding text or within a button. Here are some of the commonly used values:

baseline Aligns the baseline of the element with the baseline of its parent. This is the default value.
top Aligns the top of the element with the top of the tallest element on the line.
middle Aligns the middle of the element with the middle of the parent element.
bottom Aligns the bottom of the element with the bottom of the lowest element on the line.
sub Aligns the element as if it were subscript.
super Aligns the element as if it were superscript.
text-top Aligns the top of the element with the top of the parent element’s font.
text-bottom Aligns the bottom of the element with the bottom of the parent element’s font.
length (e.g., 10px, 2em): Raises or lowers the element by the specified length.
percentage (e.g., 50%): Raises or lowers the element by a percentage of the line-height property of the element itself.

Here's how to use vertical-align to center your icon image:


img {
  vertical-align: middle;
}

This would align the image with the middle of the text that is around it.

Margin inline

Often we want to horizontally center a child element within it's parent element. For example centering an icon or image within a card which we used to do by setting inline (left and right) margins to auto on the child elements. But now we can write this in shorthand instead with margin-inline, like this:

/* we used to write this */
.icon {
    margin-left: auto;
    margin-right: auto;
}

/* now we can write the shorthand */
.icon {
  display: block; /* This ensures the element is treated as a block */
  margin-inline: auto; /* Sets equal margins on both sides */
}

Here, display: block; will allow the contents to take up the full width of its parent element, and margin-inline: auto; will then set equal margins on both sides, centering the contents horizontally (from left to right).

<div class="outer">
    <img src="path-to-your-icon.png" width="80" height="75" class="icon_centering" alt="Icon">
</div>

.icon_centering {
      display: block; 
      margin-inline: auto;
      width: 100px; 
      height: auto;
}
.outer {
    margin-inline: auto; 
    width: 200px; 
    height: 200px; 
    border: solid 1px tomato;
}

You can control the image size within the div by adding the width and height values and as long as there is extra space around the contents the margin-inline will continue to set equal margins on both sides. We've added a thin red border with the class .outer to the parent div to help demonstrate this.

Justify-items

An alternative to using margin-inline that will give you the same results is justify-items, which until recently had started out life as a CSS Grid property but is now available to use on block-level elements too. It aligns items center along the inline axis (horizontal axis).

<div class="outer2">
    <img src="path-to-your-icon.png" width="80" height="75" alt="Icon">
</div>

.outer2 {
    display: block; 
    justify-items: center /* center image along the inline axis */
    margin-inline: auto; /* centers the box in our page */
    width: 200px; 
    height: 200px; 
    border: solid 1px tomato;
}

Align-content

Now this one might come as a surprise to some of you that are already familiar with CSS Flex and Grid properties. Because up until recently you could only use the align-content property to set the distribution of space between and around content items along a flexbox's cross axis (horizontal), or a grid element's block axis (vertical).

But now (we are excited to say) we can finally use it on block level elements to vertically align the child elements within its parent element too!!

Unfortunately unlike with Flex and Grid, block layout child elements are treated as one single element, which means the other align-content values such as space-around, space-evenly and space-between react differently than they do for flex and grid elements.

But that's okay at least we can now vertically center block element contents with just one line of CSS like this:

.box {
    align-content: center;
    border: solid 1px tomato;
    height: 10rem;
    width: 10rem;
}

Here we have added the class of .box to the parent div which controls the vertical centering with the align-content property.

<div class="box">
  <img src="path-to-your-icon.png" width="80" height="75" alt="Icon">
</div>

Horizontal & Vertical centering

So what if we wanted our icon to be both horizontally and vertically center of our parent div, is this possible with display: block; elements?

Well yes it is, by combining the two properties we just learnt margin-inline and align-content like this:

.box {
    align-content: center;
    border: solid 1px tomato;
    height: 10rem;
    width: 10rem;
}
.icon_centering {
    display: block; 
    margin-inline: auto;
    width: 100px; 
    height: auto;
}

We give the parent div the class of .box and the align-content then centers the child elements vertically. We then give the icon (child element) the class of .icon_centering and the margin-inline then centers it horizontally.

<div class="box">
    <img src="path-to-your-icon.png" width="80" height="75" class="icon_centering" alt="Icon">
</div>

Combined these two properties place our image in the very center of our red box.

More to centering

In this page we have only covered properties to center display: block; elements, though there are more ways to center our content such as when we use Flex or Grid to display our items. If you want to see how to center using CSS Flex we have a short demonstration on our JWS Styling Extras page in the Navigation Positioning & Spacing section.

Display type

It's clear from the short examples we have given you here that the display: type; plays a major part in your design as well as in the writing of CSS. As CSS can be as much about an items look and feel as well as it's relationship with other items.

You can now learn more on the display types block, inline, inline-block, flex and grid on our Display Type, Flexbox and Grid pages. Also we answer the common question of "Which ~~came~~ comes first the.... HTML, CSS or contents?" available to read now on our Setting Out page.

Plus keep up to date with when new topics land through our Roadmap page.

Page Last Edited: 07/05/2025