How to Center HTML Elements with CSS

Finding the perfect way to center HTML elements with CSS can be tasking for a beginner. With many tutorials available on the internet, finding what works for you may be a little difficult. There is also the issue of figuring out if the element you are trying to center is a block-level or an inline element. If it is a block, you need to know how many blocks you are dealing with and if these blocks are parent or child elements.

As a CSS developer, you should know how to center web content horizontally and vertically without dealing with bugs. At the end of this article, you will know five different ways of centering HTML elements with CSS. This guide is beginner-friendly and easy to follow.

5 Ways You Can Center Objects with CSS

1. Using Margin: 0 Auto

Setting the Margin property to the value of 0 auto; is one of the oldest tricks in the book used to center block-level elements. The first thing you must do is create a container with a specified width. Next, create a child element of that container to which you apply the margin property as shown below:

HTML:

<div class="container">
<div class="anotherbox">        
Random words in a box    
</div>   
</div>

CSS:

.container {
    width: 200px;
    height: 100px;
    border: 5px solid rgb(191, 157, 216);
    border-radius: 10px;
    margin: 0 auto;
}

THE RESULT:

What the code above does is that it tells your browser to add no margin at the top and bottom of your webpage but make the margin at the left and right automatic– the same.

The only downside to this method is that it only centers your elements horizontally. However, it is possible to center objects vertically using the margin property only if you know the height of your container. To do this, you have to change the 0 to half the height of the container.

2. Using Absolute Positioning with the Transform Property

Another convenient way to center block-level elements with CSS is to use an absolute position with the transform property. The code below shows how this works.

HTML:

<div class="container">
    <div class="anotherbox">
        Random words in a box
    </div>
  </div>

CSS:

.container{
    width: 50%;
    height: 550px;
    border: 10px solid rgb(191, 157, 216);
    border-radius: 5px;
    position: relative;  
}
.anotherbox{
    height: 100px;
    border: 10px solid rgb(191, 157, 216);
    border-radius: 5px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

THE RESULT:

It is important to note that you cannot use the top and right properties alone as that centers only the top edge and the left edge. Here, the transform property perfectly centers our div.

3. Using Absolute Positioning with a Negative Margin

In cases where the height of a container is known, using a negative margin half the height of the container with the position set to absolute will perfectly center the element. To better understand this, take a look at the code below:

HTML:

<div class="container">
    <div class="anotherbox">
        Random words in a box
    </div>
  </div>

CSS:

.container{
    width: 50%;
    height: 550px;
    border: 5px solid rgb(191, 157, 216);
    border-radius: 5px;
    position: relative;
    margin: 0;
}
.anotherbox{
    width: 300px;
    height: 100px;
    border: 5px solid rgb(191, 157, 216);
    border-radius: 5px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -50px 0 0 -150px
}

THE RESULT:

The negative margin allows the child element to occupy all the spaces of its parent.

4. Using CSS Flexbox Module

One of the easiest ways to center HTML elements horizontally and vertically is with the CSS flexbox model. The CSS flexbox model is modern but effective, nonetheless.

With the display: flex property, you can specify how the child elements of the flex container should layout on the webpage. Additionally, you can also define how much space you want between the child elements.

To use the flexbox model, we do this:

HTML:

<div class="container">
    <div class="anotherbox">
        Random words in a box
    </div>
  </div>

CSS:

.container{
    width: 50%;
    height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 5px solid rgb(191, 157, 216);
    border-radius: 5px; 
}
.anotherbox {
        width: 300px;
        height: 100px;
        border: 5px solid rgb(191, 157, 216);
        border-radius: 5px;
}

THE RESULT:

Using display: flex lets the browser know how to share space between items in the flex container. The CSS properties: align-items and justify-content are what center the flex-container both horizontally and vertically. This method is a straightforward way to center multiple block elements in a div container.

5. Using Grid Layout

The Grid layout module was also introduced in CSS3 and is an easy way to center things on a webpage. The major difference between display: grid and display: flex is that while the grid layout is two-dimensional (i.e it allows you to separate your elements into rows and columns), flexbox is one-dimensional (i.e you only work with rows).

To use the CSS Grid layout, you should do this:

HTML:

<div class="container">
    <div class="anotherbox">
        Random words in a box
    </div>
  </div>

CSS:

.container{
    width: 50%;
    height: 300px;
    display: grid;
    align-content: center;
    justify-content: center;
    border: 5px solid rgb(191, 157, 216);
    border-radius: 5px; 
}
.anotherbox {
        width: 300px;
        height: 100px;
        border: 5px solid rgb(191, 157, 216);
        border-radius: 5px;
}

THE RESULT:

Similar to the CSS flexbox module, you also need to create a grid container. However, instead of align-items and justify-content, you use align-content and justify-content. Alternatively, you can use the shorthand method –place-items.

How to Choose a Method

With various options available to center elements on your webpage, how do you know which to choose? In choosing a method to center your elements, there are some things you must take into consideration;

1. Are the height and width of the element known?

In cases where the fixed width and height of the element are known, using absolute positioning with a negative margin will work perfectly well. However, if the width and height are not fixed, using either a flexbox, grid, or transform property with an absolute position will center your element perfectly.

2. Is it a block-level or inline element?

To align inline elements vertically and horizontally, you can use the text-align property set to center. Additionally, for block elements, any of the methods mentioned in this guide will work perfectly.

Perfectly Centering Elements with CSS

Centering with CSS can be difficult to master due to wavering margins, paddings, and heights. However, following the techniques highlighted in this article will ensure you can center all HTML elements horizontally and vertically.