How to center align a div tag in css?

Div is block level element. By default, div occupy 100% width of parent element. To center align a div in css, use


<style>
 .wrap{ 
     width:960px;
     margin:auto;
 }
 </style>
 <div class="wrap"<
     // content for wrap div
 </div>

Let’s be honest.

Sometime throughout our coding careers, we’ve all found ourselves frustrated with centering things in CSS (looking up how to center a div within a div on Google or Stack Overflow).

It can be one of the simplest tasks to do, but can quickly become confusing as you add more elements and styles into your page.

Since it’s a pretty common problem, I’ve compiled a list of ways for centering in CSS into this guide. I’ve also included embeds/links with each example I created in CodePen. Feel free to fork, share, or copy as you wish!

<h1>Centering with CSS</h1>
<h3>Text-Align Method</h3>
<div class="blue-square-container"> 
<div class="blue-square"></div>
</div><h3>Margin Auto Method</h3>
<div class="yellow-square">
</div>
<h3>Absolute Positioning Method</h3>
<div class="green-square"></div>

1.Text-Align Method

The “text-align: center” method is perhaps the most common one you’ll see for centering. It’s used mostly for centering text on your HTML page, but it can be used to center divs as well.

The trick here is to:

Enclose the div that you want to center with a parent element (commonly known as a wrapper or container)
Set “text-align: center” to parent element
Then set the inside div to “display: inline-block”

In my example with the blue square, I enclose it with another div called “blue-square-container”. In order to center my blue square, I had to create a parent element and set the display property of my blue square to inline-block.

This is because by default, a div’s display property is set to block, meaning it will span the whole width of the page. By setting the display property of my blue square to inline-block, we ensure that the blue square will only span the width that I have set, which is 100px.

Adding multiple child elements within the parent element (blue squares in this example), will center all of them.

h1,
h3 
{ 
 text-align: center;
}

.blue-square-container 
{  
text-align: center;
}
.blue-square
 {  
background-color: #0074D9;  
width: 100px; 
height: 100px;  
display: inline-block;}

3.Margin Auto Method

Margin Auto Method

Another common way of centering is using the margin auto method. Using this method, we don’t need a parent element.

We can simply apply “margin: 0 auto” to our yellow box, as long as we have a defined width.

“margin: 0 auto” is shorthand for setting the top and bottom margins to zero, and the left and right margins to auto.

This is important, because without the 100px width I’ve defined, the browser will not be able to render the left and right margins needed to center the yellow box. By setting the width, the browser will automatically distribute the right amount of margin on either side of the yellow box.

The “0” portion can be set to any number of pixels you want for the top and bottom margins.

Another cool trick is just setting either margin-left to auto or margin-right to auto, which allows us to push our div to either the right or left side of the page, respectively (give this a try!).

.yellow-square 
{
 background-color: #FFDC00;
 width: 100px; 
 height: 100px; 
 margin: 0 auto;
}

3.Absolute Positioning Method

Absolute positioning an element allows us to essentially place the element wherever we want it on the page…with one drawback.

Absolute positioning removes the element from the flow of the page.

Why is this important?

Well it’s important because this can cause overlapping of elements if used incorrectly.

If we we want to simply center an element horizontally on the page like we’ve been doing in the first two methods, there are three steps we need to remember:

Set the element’s position property to absolute
Apply “left: 50%” to the element
Set a margin-left of half of the element’s width

In this example, we use a green square (what a beautiful green!). It’s the same size as the other examples, so our width is still 100px.

As you can see, I’ve given “position: absolute” and applied “left: 50%” to our green square. This tells the browser to move the left edge 50% to the right.

But if you’re recreating this example, we don’t want the left edge to be in the middle, we want the middle of the square to line up with the middle of the page.

This brings us to our last step. In order to line things up and offset the extra space, we apply a margin-left of half of the green square’s width. In our case it’s 50px (regardless of the width of the element, it will always be half).

green-square {  
              background-color: #3D9970; 
              width: 100px; 
              height: 100px;  
              position: absolute;  left: 50%;  
              margin-left: -50px;
    }

Transform/Translate Method

Up until now we’ve only dealt with centering things horizontally, but what if we want to put something right in the middle of the page?

Let’s center our red square both horizontally and vertically.

Though this method also uses absolute positioning and “left: 50%”, I’ve also applied two more properties to the element.

By setting the top property to 50% as well, I’m telling the browser to line up the top edge of our red square with the middle of the page vertically. But like in the previous example, we don’t want the edges to be lined up with the center, we want the center of our square to fit right on top of the center of our page.

This is where we apply a new property called transform.

There are many cool things you can do with transform, such as translating, rotating, and scaling animations, but for this example, we’ll be using translate.

We give the transform property “transform: translate(-50%, -50%)” and voila!

Our red square is centered both horizontally and vertically!

I love this method, because regardless of what the width or the height of our element is, it will always be in the center of the page.

This method is used frequently in responsive design and doesn’t require margins to be defined, like in the absolute positioning method.

<div class="purple-square-container">  <div class="purple-square"></div></div>
html,
body {
  height: 100%;
}

.purple-square-container {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.purple-square {
  background-color: #B10DC9;
  width: 300px;
  height: 300px;
}