How to Center div with CSS?

How to Center a div Both Vertically and Horizontally using CSS, Flexbox, Transform and Translate, Absolute Positioning and Negative Margins?

🙋‍♂️ Shubham Verma 🗓 September 1, 2020

How to center div with CSS?

entering things is one of the most tricky things of CSS. Sometimes we want a div placed on the center of the parent div, but it gets difficult. So in this article, we'll see how we can center the div. We'll center the div in multiple ways.
This is where you can learn tricky CSS which ultimately increases your productivity and fasten our tasking. In this, we'll explore how to center different elements horizontally, vertically, and both vertically and horizontally.

In this article, we'll learn following things:

* How to Center Text with the CSS
* How to Center a Div with CSS Margin Auto
* How to Center a Div Horizontally using Flexbox
* How to Center a Div Vertically with CSS
* How to Center a Div Vertically with Transform and Translate
* How to Center a Div Vertically with Flexbox
* How to Center a Div Vertically and Horizontally with CSS Absolute Positioning and Negative Margins
* How to Center a Div Vertically and Horizontally with Transform and Translate
* How to Center a Div Vertically and Horizontally with Flexbox

Let's get started.

Center Text with the CSS:

Center text with CSS is quite easy. To center the text, we'll use text-align property To center text horizontally, just use the text-align property with the value center:

                                <div class="container">
                                    <p>Hello IDKBlogs!</p>
                                  </div>

                                p {
                                    text-align: center;
                                  }

Complete code:

                                <!DOCTYPE html>
                                <html>
                                <head>
                                  <meta charset="UTF-8">
                                  <title>How to Center div with CSS?| IDKBlogs</title>
                                </head>
                                <style>
                                  .container {
                                    width: 500px;
                                    height: 500px;
                                    border: 2px solid black;
                                    margin-left: 30%;
                                    position: relative;
                                  }
                                
                                  p {
                                    text-align: center;
                                  }
                                </style>
                                
                                <body>
                                  <div class="container">
                                    <p>Hello IDKBlogs!</p>
                                  </div>
                                </body>
                                </html>

Output:

How to Center div with CSS?

Center a Div with CSS Margin Auto:

Use the CSS margin property with the value 0 auto to center block-level elements like a div horizontally:

                        <div class="container">
                            <div class="child"></div>
                          </div>

                        .container {
                            width: 300px;
                            height: 300px;
                            border: 2px solid black;
                            margin-left: 30%;
                            position: relative;
                          }
                        
                          .child{
                           ... 
                            margin: 0 auto;
                          }

Complete code:

                            <!DOCTYPE html>
                            <html>
                            <head>
                              <meta charset="UTF-8">
                              <title>How to Center div with CSS?| IDKBlogs</title>
                            </head>
                            <style>
                              .container {
                                width: 300px;
                                height: 300px;
                                border: 2px solid black;
                                margin-left: 30%;
                                position: relative;
                              }
                            
                              .child{
                                width: 50px;
                                height: 50px;
                                background-color: blue;
                                
                                margin: 0 auto;
                              }
                            </style>
                            
                            <body>
                              <div class="container">
                                <div class="child"></div>
                              </div>
                            </body>
                            </html>

Output:

How to Center div with CSS?

Center a Div Horizontally using Flexbox:

Flexbox is a very modern way of designing things with a responsive feature. Using flexbox, you need to write fewer codes as compare to general CSS. However, it's not fully supported in some legacy browsers like Internet Explorer.
To center an element horizontally with Flexbox, just apply display: flex and justify-content: center to the parent element:

                            <div class="container">
                                <div class="child"></div>
                            </div>

                            .container {
                                ...
                                display: flex;
                                justify-content: center;
                            }

Complete code:

                                <!DOCTYPE html>
                                <html>
                                
                                <head>
                                  <meta charset="UTF-8">
                                  <title>How to Center div with CSS?| IDKBlogs</title>
                                </head>
                                <style>
                                  .container {
                                    width: 300px;
                                    height: 300px;
                                    border: 2px solid rgb(155, 149, 149);
                                    margin-left: 30%;
                                
                                    display: flex;
                                    justify-content: center;
                                  }
                                
                                  .child {
                                    width: 50px;
                                    height: 50px;
                                    background-color: rgb(255, 238, 0);
                                
                                  }
                                </style>
                                
                                <body>
                                  <div class="container">
                                    <div class="child"></div>
                                  </div>
                                </body>
                                
                                </html>

Output:

How to Center div with CSS?

Let's see, How to Center Vertically:

Making a div vertically center with general CSS ( without flexbox ) is tricky and complex. In this part we'll see some general CSS to center the things vertically, then we'll use flexbox to centering the div.

How to Center a Div Vertically with CSS:

In this part, we'll use CSS Absolute Positioning and Negative Margins. this is a very popular way to centering the div. For this method, we must know the height of the element you want to center ( here, the child ). First, set the display property of the parent element to relative. Then for the child element, set the display property to absolute and top to 50%:

                            <div class="container">
                                <div class="child"></div>
                              </div>

                            .container {
                                ...
                                position: relative;
                              }
                              
                              .child {
                                width: 50px;
                                height: 50px;
                                background-color: green;
                    
                                /* CSS to Center vertically */
                                position: absolute;
                                top: 50%;
                              }

Complete code:

                            <!DOCTYPE html>
                            <html>
                            
                            <head>
                              <meta charset="UTF-8">
                              <title>How to Center div with CSS?| IDKBlogs</title>
                            </head>
                            <style>
                              .container {
                                width: 300px;
                                height: 300px;
                                border: 2px solid rgb(155, 149, 149);
                                margin-left: 30%;
                            
                                position: relative;
                              }
                            
                              .child {
                                width: 50px;
                                height: 50px;
                                background-color: green;
                            
                            
                                position: absolute;
                                top: 50%;
                              }
                            </style>
                            
                            <body>
                              <div class="container">
                                <div class="child"></div>
                              </div>
                            </body>
                            
                            </html>

Output:

How to Center div with CSS?

But, here is a problem, if you see the child div it just vertically centers the top edge of the child element. If your child div has a large height, then you can see it is not actually vertically centered.
To actually center the child element, set the margin-top property to -(half the child element's height):

                            .child {
                                width: 50px;
                                height: 50px;
                                background-color: green;
                            
                            
                                position: absolute;
                                top: 50%;
                                margin-top: -25px; /* half this element's height */
                              }

Output:

How to Center div with CSS?

Center a Div Vertically with Transform and Translate:

This way can be used for the above implementation, if you don't know the height of the child's div, then you can use this trick or even if you know the height of the child's div then also you can use this trick.
This method is very similar to the negative margins method above. Set the display property of the parent element to relative. For the child element, set the display property to absolute and set top to 50%. Now instead of using a negative margin to truly center the child element, just use transform: translate(0, -50%).

The translate(0, -50%) is shorthand for translateX(0) and translateY(-50%). You could also write transform: translateY(-50%); to center the child element vertically.

                                        <div class="container">
                                            <div class="child"></div>
                                          </div>

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

Complete code:

                                        <!DOCTYPE html>
                                        <html>
                                        
                                        <head>
                                          <meta charset="UTF-8">
                                          <title>How to Center div with CSS?| IDKBlogs</title>
                                        </head>
                                        <style>
                                          .container {
                                            width: 300px;
                                            height: 300px;
                                            border: 2px solid rgb(155, 149, 149);
                                            margin-left: 30%;
                                        
                                            position: relative;
                                          }
                                        
                                          .child {
                                            width: 50px;
                                            height: 50px;
                                            background-color: darkgoldenrod;
                                        
                                        
                                            position: absolute;
                                            top: 50%;
                                            transform: translate(0, -50%);
                                          }
                                        </style>
                                        
                                        <body>
                                          <div class="container">
                                            <div class="child"></div>
                                          </div>
                                        </body>
                                        
                                        </html>

Output:

How to Center div with CSS?

How to Center a Div Vertically with Flexbox:

Centering the div horizontally, Flexbox provides the way to do so in very easy, flexbox makes it super easy to center things vertically. To center an element vertically, apply display: flex; and align-items: center; to the parent element:

                        <div class="container">
                            <div class="child"></div>
                          </div>

                        .container {
                            ...
                            display: flex;
                            align-items: center;
                          }

Complete code:

                        <!DOCTYPE html>
                        <html>
                        
                        <head>
                          <meta charset="UTF-8">
                          <title>How to Center div with CSS?| IDKBlogs</title>
                        </head>
                        <style>
                          .container {
                            width: 300px;
                            height: 300px;
                            border: 2px solid rgb(155, 149, 149);
                            margin-left: 30%;
                        
                            display: flex;
                            align-items: center;
                          }
                        
                          .child {
                            width: 50px;
                            height: 50px;
                            background-color: black;
                        
                          }
                        </style>
                        
                        <body>
                          <div class="container">
                            <div class="child"></div>
                          </div>
                        </body>
                        
                        </html>

Output:

How to Center div with CSS?

How to Center a div Both Vertically and Horizontally:

We have seen how to center the div vertically or horizontally separately. Now let's see how we can center the div vertically and horizontally together.

Center a Div Vertically and Horizontally with CSS Absolute Positioning and Negative Margins:

this method is very similar to the method as we described above in this post, In this, you must know the height and width of the div which needs to be center. Set the display property of the parent element to relative. And set the child's display property to absolute, top to 50%, and left to 50%. This just centers on the top left corner of the child element vertically and horizontally. But this is not an optimized way, you need to assign the negative top margin set to half the child element's height, and a negative left margin set to half the child element's width.

                            <div class="container">
                                <div class="child"></div>
                              </div>

                            .container {
                                position: relative;
                              }
                            
                              .child {        
                              /* Center vertically and horizontally */
                              position: absolute;
                              top: 50%;
                              left: 50%;
                              margin: -25px 0 0 -25px; /* apply negative top and left margins to truly center the element */
                              }

Complete code:

                            <!DOCTYPE html>
                            <html>
                            
                            <head>
                              <meta charset="UTF-8">
                              <title>How to Center div with CSS?| IDKBlogs</title>
                            </head>
                            <style>
                              .container {
                                width: 300px;
                                height: 300px;
                                border: 2px solid rgb(155, 149, 149);
                                margin-left: 30%;
                            
                                position: relative;
                              }
                            
                              .child {
                                width: 50px;
                                height: 50px;
                                background-color: pink;
                            
                                /* Center vertically and horizontally */
                                position: absolute;
                                top: 50%;
                                left: 50%;
                                margin: -25px 0 0 -25px; /* apply negative top and left margins to truly center the element */
                              }
                            </style>
                            
                            <body>
                              <div class="container">
                                <div class="child"></div>
                              </div>
                            </body>
                            
                            </html>

Output:

How to Center div with CSS?

Center a Div Vertically and Horizontally with Transform and Translate:

This way can be used for the above implementation, if you don't know the height of the child's div, then you can use this trick or even if you know the height of the child's div then also you can use this trick. This method is very similar to the negative margins method above.

* Set the display property of the parent element to relative.
* Set the child element's display property to absolute, top to 50%, and left to 50%.
* Use transform: translate(-50%, -50%); to truly center the child element:

                            <div class="container">
                                <div class="child"></div>
                              </div>

                            .container {
                                ...
                                position: relative;
                              }
                              
                              .child {
                                ... 
                                top: 50%;
                                left: 50%;
                                position: absolute;
                                transform: translate(-50%, -50%);
                              }

Complete code:

                        <!DOCTYPE html>
                        <html>
                        
                        <head>
                          <meta charset="UTF-8">
                          <title>How to Center div with CSS?| IDKBlogs</title>
                        </head>
                        <style>
                          .container {
                            width: 300px;
                            height: 300px;
                            border: 2px solid rgb(155, 149, 149);
                            margin-left: 30%;
                        
                            position: relative;
                          }
                        
                          .child {
                            width: 50px;
                            height: 50px;
                            background-color: lightsalmon;
                        
                            /* Center vertically and horizontally */
                            top: 50%;
                            left: 50%;
                            position: absolute;
                            transform: translate(-50%, -50%);
                          }
                        </style>
                        
                        <body>
                          <div class="container">
                            <div class="child"></div>
                          </div>
                        </body>
                        
                        </html>

Output:

How to Center div with CSS?

Center a Div Vertically and Horizontally with Flexbox:

The flexbox is a blessing of CSS to the designer and developer :). Using the flexbox is very easy and you can center the div vertically and horizontally by just writing the fewer CSS codes. This is just a combination of the two above Flexbox methods. You need to write justify-content: center and align-items: center to center the child element(s) horizontally and vertically:

                        <div class="container">
                            <div class="child"></div>
                          </div>

                        .container {
                            ...
                            display: flex;
                            justify-content: center;
                            align-items: center;
                          }

Complete code:

                        <!DOCTYPE html>
                        <html>
                        
                        <head>
                          <meta charset="UTF-8">
                          <title>How to Center div with CSS?| IDKBlogs</title>
                        </head>
                        <style>
                          .container {
                            width: 300px;
                            height: 300px;
                            border: 2px solid rgb(155, 149, 149);
                            margin-left: 30%;
                        
                            display: flex;
                            justify-content: center;
                            align-items: center;
                          }
                        
                          .child {
                            width: 50px;
                            height: 50px;
                            background-color: aquamarine;
                          }
                        </style>
                        
                        <body>
                          <div class="container">
                            <div class="child"></div>
                          </div>
                        </body>
                        
                        </html>

Output:

How to Center div with CSS?

Conclusion:

This tutorial is very informative to those who want to learn CSS. The way which is described in this post is evergreen ways to center the div vertically and horizontally. Every developer must know these basic things, this is not only for designing the things, this if for your bootup the knowledge. In this article, we explored approx all the ways of centering things using CSS.

In this article, we explored :

* Center Text with the CSS
* Center a Div with CSS Margin Auto
* Center a Div Horizontally using Flexbox
* How to Center a Div Vertically with CSS
* Center a Div Vertically with Transform and Translate
* How to Center a Div Vertically with Flexbox
* Center a Div Vertically and Horizontally with CSS Absolute Positioning and Negative Margins
* Center a Div Vertically and Horizontally with Transform and Translate
* Center a Div Vertically and Horizontally with Flexbox

Support our IDKBlogs team

Creating quality content takes time and resources, and we are committed to providing value to our readers. If you find my articles helpful or informative, please consider supporting us financially.

Any amount (10, 20, 50, 100, ....), no matter how small, will help us continue to produce high-quality content.

Thank you for your support!

Thank you

I appreciate you taking the time to read this article. The more that you read, the more things you will know. The more that you learn, the more places you'll go. If you’re interested in Node.js or JavaScript this link will help you a lot.

If you found this article is helpful, then please share this article's link to your friends to whom this is required, you can share this to your technical social media groups also. You can follow us on our social media page for more updates and latest article updates.
To read more about the technologies, Please subscribe us, You'll get the monthly newsletter having all the published article of the last month.