Centering Elements with CSS for Beginners

Learn how to center HTML elements like <div> using CSS!

This beginner-friendly guide covers both horizontal and vertical centering techniques. Whether you're just getting started with web development or need a quick refresher, this article offers clear examples and helpful tips to make centering elements easy and intuitive.

We'll explore multiple methods to align elements in the center of their parent container, using modern CSS techniques such as Flexbox, positioning, and margin auto.
By the end, you'll be able to confidently center content in a variety of layout scenarios.

Horizontal Centering of Elements with CSS

When centering elements horizontally with CSS, the method you use depends on whether the element is a block-level element or an inline-level element. Before we dive into the techniques, let's first understand the key differences between block-level and inline-level elements.

Comparison of Block-Level and Inline-Level Elements
Feature Block-Level Elements Inline-Level Elements
Line Break Behavior Causes a line break before and after the element, unless the parent uses layouts like display: flex, display: inline-flex, display: grid, or display: inline-grid. Does not cause line breaks. The content flows inline with surrounding elements.
Typical display Values display: block,
display: table,
display: flex,
display: grid		 display: inline,
display: inline-block,
display: inline-table,
display: inline-flex,
display: inline-grid
Common Elements <div>, <h1>~<h6>, <p> <span>, <a>, <img>

Centering an Element Itself: Using margin-left: auto and margin-right: auto on Block-Level Elements

Here's how to center a typical block-level element like a <div>. The default display value for a <div> is block.

HTML 
<div>Block-level element</div>
CSS 
div {
    width: 150px;
    height: 150px;
    background-color: yellow;
    margin-left: auto;
    margin-right: auto;
}
Result

As shown in the example above, block-level elements can be horizontally centered using margin-left: auto and margin-right: auto.

Now let's look at how to do the same with an inline-level element by changing its display property to block.

HTML 
<span>Inline-level element</span>
CSS 
span {
    display: block; /* Changes the default inline display of the span to block */
    width: 150px;
    height: 150px;
    background-color: yellow;
    margin-left: auto;
    margin-right: auto;
}
Result

In this example, the <span> element becomes a block-level element, allowing it to be centered using margin-left: auto and margin-right: auto.

Centering with a Parent That Has Horizontal Space: Using text-align: center to Center Inline-Level Children

HTML 
<div class="container">
    <span>Inline-level child element</span>
</div>
CSS 
.container {
    background-color: orange;
    text-align: center; /* Horizontally centers inline content like text and images */
}
.container span {
    background-color: yellow;
}
Result

In this example, the parent element has horizontal space, and the text-align: center rule centers its inline-level children.

Centering with a Parent That Has Horizontal Space: Using display: flex and justify-content: center to Center Children Horizontally

Example with a Block-Level Child

HTML 
<div class="container">
    <div>Block-level child element</div>
</div>
CSS 
.container {
    background-color: orange;
    display: flex;
    justify-content: center; /* Horizontally centers children (block or inline) */
}
.container div {
    width: 150px;
    height: 150px;
    background-color: yellow;
}
Result

Example with an Inline-Level Child

HTML 
<div class="container">
    <span>Inline-level child element</span>
</div>
CSS 
.container {
    background-color: orange;
    display: flex;
    justify-content: center; /* Horizontally centers children (block or inline) */
}
.container span {
    background-color: yellow;
}
Result

Vertically Centering Elements with CSS

Using display: flex and align-items: center on the Parent Element

This method works for both block-level and inline-level elements. In the following example, a block-level <div> is used as the child element.

HTML 
<div class="container">
    <div>Block-level child element</div>
</div>
CSS 
.container {
    background-color: orange;
    height: 300px;
    display: flex;
    align-items: center; /* Vertically centers the child element (block or inline) */
}
.container div {
    width: 150px;
    height: 150px;
    background-color: yellow;
}
Result

The key to vertical centering here is using align-items: center along with display: flex on the parent container. This aligns the child element in the vertical center of the parent.

Using position and transform on Both Parent and Child

This technique also works for both block-level and inline-level elements. Here's an example using a block-level <div> as the child.

HTML 
<div class="container">
    <div>Block-level child element</div>
</div>
CSS 
.container {
    background-color: orange;
    height: 300px;
    position: relative;
}
.container div {
    width: 150px;
    height: 150px;
    background-color: yellow;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}
Result

In this method:

  • The parent element is given position: relative.
  • The child element is positioned absolutely with top: 50%.
  • Then, transform: translateY(-50%) pulls it back by half its height to align it precisely in the vertical center.

Centering Elements Both Horizontally and Vertically with CSS

Using display: flex, justify-content: center, and align-items: center on the Parent Element

This method works for both block-level and inline-level elements. The example below uses a block-level <div> as the child element.

HTML 
<div class="container">
    <div>Block-level child element</div>
</div>
CSS 
.container {
    background-color: orange;
    height: 300px;
    display: flex;
    justify-content: center; /* Horizontally centers the child element */
    align-items: center;      /* Vertically centers the child element */
}
.container div {
    width: 150px;
    height: 150px;
    background-color: yellow;
}
Result

This technique centers the child element both horizontally and vertically using Flexbox. It's one of the most straightforward and widely supported ways to center content in modern CSS.

Using position and transform on Both Parent and Child Elements

This technique also supports both block-level and inline-level elements. Here's an example with a block-level <div>.

HTML 
<div class="container">
    <div>Block-level child element</div>
</div>
CSS 
.container {
    background-color: orange;
    height: 300px;
    position: relative;
}
.container div {
    width: 150px;
    height: 150px;
    background-color: yellow;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
}
Result

Here's how this method works:

  • The parent container is set to position: relative.
  • The child element is absolutely positioned at the center of the parent using top: 50% and left: 50%.
  • Then it is pulled back by half of its own width and height using transform: translateX(-50%) translateY(-50%) to achieve perfect centering.

This approach is flexible and works reliably across different types of content and layouts.

See also