How I Center My Div as a Newbie Frontend Dev

I completed a 68-hour frontend boot camp last week.

Then I created a Frontend Mentor account with enthusiasm to work on real-world projects.

I have tackled three challenges. And in each of them, I struggled with positioning my div.

This is painful because I did it the last time. Why is not working this time? But that's the dev experience.

In this article, I will explain patterns I discovered that helped me understand why elements behave the way they do.

Keeping a div at the center of its container is a general challenge for developers, I realized.

The first thing to keep in mind is that a div is a block-level element. And block-level elements occupy the entire width of their container.

They stack up on themselves. That is, if you have two divs in a container, the second will start on a new line by default. Now let's dive into the real deal.

Using margin: 0 auto; to center div

This is my favorite. It effortlessly takes the pain away.

This is how it works- margin: 0 auto; tells the browser to calculate equal margins on both sides of the div.

It distributes the space remaining in the parent container after the div occupies its width equally on both sides of the div.

This automatically achieves a horizontal centering.

The zero in `margin: 0 auto; keeps the top and bottom margin at 0. While this does not affect the horizontal centering it gives you the power to explicitly control the vertical behavior of the div.

This is better than leaving it for the browser.

Conditions that Prevent this Method from Working

Unspecified Container Width

If the parent container of the

element does not have a specified width, margin: 0 auto; will not affect centering the .

This is because auto margins distribute the remaining space evenly on the left and right sides of the element, so there must be space to distribute on both sides of the div.

Remember to specify the desired width of the parent container.

Absolute Positioning.

In one of the challenges I solved, I used margin: 0 auto; but the div was stuck at the left edge of its parent container. I inspected the HTML page and discovered something unusual.

The box model has a position property. When I set it to zero the div flew to the right edge of the container. I went back to CSS and removed position: absolute;. This gave me what I wanted.

I must have used that property when trying different ways of centering the div and forgot to delete it. Do not use absolute positioning alongside margin: 0 auto;

Display Property

If the parent container has a display property value other than block or flex, such as inline-block, inline, or table, margin: 0 auto; may not work as expected.

This is because auto margins only work with block-level and flexbox elements.

Browser Compatibility

It's unlikely you have such outdated versions but earlier releases of some browsers have limited support for margin: 0 auto;.

Using Flexbox to center divs

This method is common. Set the parent container of the targeted div element to display: flex;. This turns the container into a flexbox.

Then use justify-content: center; to align the child element or div at the horizontal center. This achieves the result.

Use align-items: center; to place the div at the center of the vertical axis of its parent container.

Conditions that May Prevent Flexbox from Centering a Div

Absolute Positioning

If the div is set to an absolute position, justify-content: center; will not center it.

Negative Margin

A div with a negative margin may not be visibly centered with justify-content: center;

Centering a Div Using Absolute Positioning

This method came in handy when the above three failed. I wanted to position an FAQ accordion as an overlay on top of two other divs. See the image below.

The purple and the light pink background are two divs. The FAQ is another div overlaying the first two.

I set the position of the parent container, in this case, the body, to relative.


body {
position: relative;
width: 300px; /* set desired width */
height: 300px; /* set desired height */
}

Then I set the position of the actual div, which is the FAQ accordion, to absolute. Then the top and left property to 50%.


.faq-accordion {
position: absolute;
top: 50%; /* positions div at center of vertical axis */
left: 50%; /* positions div at center of horizontal axis */
}


The FAQ no longer follows the normal flow of the document. It is positioned absolutely and does not move in relative to other elements.

This produced some unexpected results. For example, you will expect any element inside the second div (light pink section) to be positioned under the FAQ.

This did not happen by default. The element went all the up to the beginning of the div as if the FAQ did not exist.

This is something to keep in mind while using this method.

Using Grid Layout to Center a Div

This method is also targeted at the parent container. Set the parent container to display: grid;.


body {
display: grid;
}

Then use the property place-items: center; to place the target div at the center, vertically and horizontally.


faq-accordion {
place-items: center;
}


place-items: center; is a shorthand property for setting justify-item: center; and align-item: center;. justify-item sets the div at the center horizontally while align-item sets the div at the center on the vertical axis.

I have used this method to center my divs. You can use them too.
If you are a beginner, so I am. I publish my dev journey as I experience it.

What other ways have you used to achieve the same result? Any observations? Share your experience.

Cover Photo by Clark Tibbs on Unsplash