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

Welcome to IDKBlogs.

If our contents help you and you learned from this platform, please consider supporting what we do.

Thank you.

Strongly Recommended Books For You:

Reading books opens the door to allow in more lights, If we want to know a man of rare intellect, try to know what books he/she reads.

For India:

For Other Countries (United States, United Kingdom, Spain, Italy, Germany, France, Canada, etc)

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.

Combined two or more images into one in MacBook using Terminal.

Git Error: Remote: Repository not found

Git Error: error: cannot lock ref "refs/heads//": "refs/heads/" exists; cannot create "refs/heads//***"

What is WebP images?

Detect the user browser using JavaScript

Detect the browser closing or tab closing in javascript

Convert base64 data into pdf using javascript

Convert image file into base64 in javascript

Blob in javascript. Convert base64 data into blob using javascript

Open a new popup browser window with given HTML content using javascript

Its all about EC2

AWS EC2 | Create AWS EC2 Instance step by step

Remote access of AWS EC2 Linux Instance using SSH

Convert .ppk file to .pem file using putyygen

What is Blink tag in HTML? Implement the Blink Tag. Create your own Blink effects

Hide the options dropdown from ANT Select component

What Are Your Career Aspirations?

Xcrun: error: invalid active developer path (/Library/ Developer/ CommandLineTools)

Fatal error: one of the sub-processes failed: com.docker.driver.amd64-linux -addr

Funny Programming | Idkblogs.com | Shubham Verma

Copyright © 2021 IDKBlogs	Categories	Policy Links
All Right Reserved	All	Terms and Conditions
News Letter	Javascript	Privacy Policy
Job Letter	NodeJS	Checkout User Flow
About Us	AngularJS	Refund and Cancellation Policy
Contact Us	Angular2+
Unsubscribe	ReactJS
Last Update : 26 January 2023 (IST)	Others
Powered by: IDKBlogs	What I Use?

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?

How to center div with CSS?

Center Text with the CSS:

Complete code:

Output:

Center a Div with CSS Margin Auto:

Complete code:

Output:

Center a Div Horizontally using Flexbox:

Complete code:

Output:

Let's see, How to Center Vertically:

How to Center a Div Vertically with CSS:

Complete code:

Output:

Output:

Center a Div Vertically with Transform and Translate:

Complete code:

Output:

How to Center a Div Vertically with Flexbox:

Complete code:

Output:

How to Center a div Both Vertically and Horizontally:

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

Complete code:

Output:

Center a Div Vertically and Horizontally with Transform and Translate:

Complete code:

Output:

Center a Div Vertically and Horizontally with Flexbox:

Complete code:

Output:

Conclusion:

Support our IDKBlogs team

Welcome to IDKBlogs.

If our contents help you and you learned from this platform, please consider supporting what we do.

Thank you.

Strongly Recommended Books For You:

For India:

For Other Countries (United States, United Kingdom, Spain, Italy, Germany, France, Canada, etc)

RELATED POSTS:

Combined two or more images into one in MacBook using Terminal.

Git Error: Remote: Repository not found

Git Error: error: cannot lock ref "refs/heads/***/***": "refs/heads/***" exists; cannot create "refs/heads/***/***"

What is WebP images?

Detect the user browser using JavaScript

Detect the browser closing or tab closing in javascript

Convert base64 data into pdf using javascript

Convert image file into base64 in javascript

Blob in javascript. Convert base64 data into blob using javascript

Open a new popup browser window with given HTML content using javascript

Its all about EC2

AWS EC2 | Create AWS EC2 Instance step by step

Remote access of AWS EC2 Linux Instance using SSH

Convert .ppk file to .pem file using putyygen

What is Blink tag in HTML? Implement the Blink Tag. Create your own Blink effects

Hide the options dropdown from ANT Select component

What Are Your Career Aspirations?

Xcrun: error: invalid active developer path (/Library/ Developer/ CommandLineTools)

Fatal error: one of the sub-processes failed: com.docker.driver.amd64-linux -addr

👈

Enjoyed this moment?

OTHER POSTS

Its all about EC2

A best cloud deployment technique: Docker

AWS EC2 | Create AWS EC2 Instance step by step

Remote access of AWS EC2 Linux Instance using SSH

Convert .ppk file to .pem file using putyygen

What is Atlassian Confluence? How to create your page on Atlassian Confluence?

What is Blink tag in HTML? Implement the Blink Tag. Create your own Blink effects

Turn On/Off firewall of your mac using terminal/CMD

Part 1: What is Jenkins (CI/CD) and How does it work? Advantages of Jenkins

Part 2: How to install Jenkins? and How to use Jenkins?

View All (134)

SOCIAL POSTS

MONTHLY POSTS

CATEGORIES

Subscribe Us:

Git Error: error: cannot lock ref "refs/heads//": "refs/heads/" exists; cannot create "refs/heads//***"