4 Ways to Center Div with CSS

“It has been 50 years since humans first walked on the moon, yet we still find ourselves grappling with the task of centering a div with CSS.” – Anonymous

But do not despair, as this post will showcase four methods for centering a div with CSS, along with the advantages and disadvantages of each. Join us as we take a closer look!

1. Flex Layout

The first technique we’ll cover is the simplest of all – using a flex layout. All you need to do is add the properties display: flex, justify-content: center to the parent div for horizontal justification and align-items: center for vertical alignment. With these simple additions, your div will be perfectly centered.

display: flex;
justify-content: center;
align-items: center;

One of the key benefits of using the flex display method is that you don’t need to define the width and height of the div, even when it contains just text. This method can be applied to both inline and block elements and is the quickest way to center multiple elements within a single div.

2. margin: 0 auto

margin: 0 auto;

This is a fast and widely-used solution, which simply involves adding the properties to any div. However, it has several limitations. The element must have a defined width, a block or table display, and cannot be fixed or absolutely positioned. Additionally, it cannot be used for vertical alignment, making it less versatile and better suited for specific scenarios.

3. text-align and inline-block

The third method is to use a combination of text-align and inline-block display. Simply add text-align center to parent div and set the child div display to inline-block.

.example-div {
    display: inline-block;
}
.parent-div {
    text-align: center;
}

This will treat the div as an inline element, making it subject to text-align center. Unlike the margin:0 auto method, the width does not need to be specified. However, it still cannot be used for vertical alignment.

4. 2D Transform

The 2D transform method is a little more involved, but it offers greater control and versatility when it comes to centering elements. The first step is to set the position of the element to absolute and to set the top and left properties to 50%. This will center the div on the screen. Then, subtract 50% of the translate value for both the x and y axes to offset the size of the element, effectively centering it within its parent container.

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

Our div will always be at the center of the screen and will ignore all other elements. (due to absolute position) Very useful if you want to use your div to overlay others but still you will need to define width and height for the div to make this works

Note: you can change the position to relative if you want to center the div relative to the parent instead to the screen.

That's all for this tutorial. If you like it, check out our YouTube channel and our Twitter to stay tune for more dev tips and tutorials