I am sure that we can all agree that there is nothing more frustrating than your CSS code not working as expected! Its especially worse if you don't like CSS and you have a problem with it and on top of that, you struggle to centre or align certain elements on your site... I can assure you, the frustration ends today.

What I need to stress out is, its very important to know and understand 1) the box model very well and 2) the properties and how they work when you try to centre a div. Its vital because it will help you understand how to build a good layout for your site, prevent elements from overlapping with other elements on the page or content from stretching out of the edges of its container!

I think this image demonstrates the last point very well 😁 (and yes, CSS is awesome)

Now let's take a look at the many methods you can use to centre a div, both vertically, horizontally and right in the middle of the page.

NB This is the HTML code that applies to all scenarios!

<div class = "parent-div">
   <div class = "child-div">Bye World</div>
</div>

At the centre of the page

Here are the 4 methods you can use to centre a div right at the centre of your page.

1. Flex layout

This is probably the most famous and used method to centre divs. Remember, it only works inside a display: flex container element. The justify-content: center is used to make the elements align horizontally and align-items: center aligns them vertically.

.parent-div {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

Not working?

Make sure that there is enough height space for the element container if using the align-items doesn't centre the div vertically, height: 100vh is highly recommended.

2. Grid Layout

Second best and straightforward way to centre a div is using display: grid and place-items: center to align your div both vertically and horizontally. Its agreeably much faster to write out than the flex method, but whatever works for you, use it!

.parent-div {
    display: grid;
    place-items: center;
}

Not working?

Just like the flex method, make sure that there is enough height space for the parent element container, height: 100vh is highly recommended.

3. Margin

This method only works for child elements of flex or grid and not on regular block elements. Make sure that there is enough height for the parent container so that it centred as expected.

.parent-div {
    display: grid;
    height: 100vh;
}

.child-div {
    margin: auto;
}

Not working?

Make sure the parent container is using a grid or flex display.

4. 2D Transform

The transform property allows you to move the element from its original position and the translate function which accepts 2 values, X and Y, moves it in a vertical or horizontal direction. The div will always be centred and will ignore other elements in the page.

.parent-div {
    position: relative;
    width: 150px;  
    height: 200px;
}

.child-div {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
}

Not working?

Define the height to the child element in order for it to work, use position: absolute and make sure the parent container is set to position: relative in order to contain the child element.

Centre Horizontally

Here are the 3 methods you can use to centre a div horizontally on your page.

1. margin: auto

Only applicable to block, flex and table elements, which also must have their width defined and must not use position: fixed or position: absolute. Defining your width is important because it tells the browser how wide your content is and no matter how much your content width is, it will remain centred on the page.

.parent-div {
    width: 60%;
    margin: auto; 
}

Not working?

Check if you defined the width and that the elements you are using are applicable. Do not set width to 100% because you will not see any changes, set it less 100%.

2. justify-content

As mentioned, using justify-content: center will centre the div horizonally.

.parent-div {
    display: flex;
    justify-content: center;
}

Not working?

Make sure you display the div as a flex or grid element.

3. Combination of text-align and inline-block

Strange I know, text-align is applicable to only text, yes! But with the inline-block property, it will work on a div and force it to behave like an inline element and is subjected to the text-align: center property. Its not a must to specify the width because the element will take whatever width specified by default by the browser.

.parent-div {
    text-align: center;
}

.child-div {
    width: 100px;
    height: 120px;
    border: 2px red solid;
    display: inline-block;
}

Not working?

Do make sure that the child element is set to display: inline-block.

Centre Vertically

Here are the 3 methods you can use to centre a div vertically on your page.

1. display: table and display: table-cell

The display: table property doesn't have to be used only on tables. Applied to a div, it forces it to act like a table and setting the child element to display: table-cell forces it to act like a table cell. Its very important to add the vertical-align: center declaration to the child element so that the div centres vertically. The vertical-align property is only applicable to inline and table-cell child elements.

Not working?

Make sure that 1) height is specified, 2) parent container is set to display: table and 3) child element is set to display: table-cell and 4) vertical-align: middle is set.

2. align-items

As mentioned, using align-items: center will centre the div vertically.

.parent-div {
    display: flex;
    align-items: center;
    height: 100vh;
}

Not working?

Make sure you display the div as a flex element and that the height is specified.

3. 2D Transform

Set the position property to absolute and set top to 50% for the child element and just use transform: translate(0, -50%). You could also write transform: translateY(-50%) to center the child element vertically.

.parent-div {
  position: relative;
}

.child-div {
  position: absolute;
  top: 50%;
  transform: translate(0, -50%);
}

Not working?

Make sure the parent container is set to position: relative in order to contain the child element.

Conclusion

See 😎 Its not that difficult to centre a div with CSS. Use any method that is of use and applicable to you. Remember, its really important to know and to understand the box model very well and how it works, once you do that... you are unstoppable!

May your effort and dedication result in falling inlove with this beautiful language and make CSS the centre of your world... one day!