How to Center a Div: A Quick Guide.

While I was first doing CSS in 2016, this is the problem I use to face and search on Google so frequently. Centering a div element is a common task in web development, so common that it may seem straightforward, there are several methods to achieve it. In this short guide, I will guide you to explore a few ways on how to center a div both horizontally and vertically using CSS.

Using the Margin Auto Method to Center Div

The simplest way to horizontally center a div is by using the margin: auto; property. This method works when the width of the div is specified.

                        
                          <style>
                            .center-div {
                              width: 50%;
                              margin: auto;
                              background-color: #f2f2f2;
                              padding: 20px;
                            }
                          </style>
                      
                          <div class="center-div">
                            Content goes here
                          </div>
                        
                      

Centering a Div with Flexbox (Both Horizontal and Vertical Div Centering)

Flexbox is a powerful layout model in CSS that simplifies centering both horizontally and vertically. Use the following CSS for a flex container:

                        
                        <style>
                            .flex-container {
                            display: flex;
                            justify-content: center; /* Horizontal centering */
                            align-items: center; /* Vertical centering */
                            height: 100vh; /* Optional: Make the container full height */
                            }
                    
                            .center-div {
                            background-color: #f2f2f2;
                            padding: 20px;
                            }
                        </style>
                    
                        <div class="flex-container">
                            <div class="center-div">
                            Content goes here
                            </div>
                        </div>
                        
                    

How to Center a Div with CSS Grid (Both Horizontal and Vertical Centering)

CSS Grid is another layout model that allows for centering elements. Similar to flexbox, it provides both horizontal and vertical centering.

                        
                        <style>
                            .grid-container {
                            display: grid;
                            place-items: center; /* Center both horizontally and vertically */
                            height: 100vh; /* Optional: Make the container full height */
                            }
                    
                            .center-div {
                            background-color: #f2f2f2;
                            padding: 20px;
                            }
                        </style>
                    
                        <div class="grid-container">
                            <div class="center-div">
                            Content goes here
                            </div>
                        </div>
                        
                    

You can try centering Div on the code below form where you can access code on Codepen

See the Pen How to Center a Div - Playground by Nabin Paudel (@Nabin-Paudel-the-animator) on CodePen.

Choose the method that best fits your layout requirements. Experiment with these techniques to find the one that suits your project and enhances the overall design. This is not going to be the last time you are searching this type of tutorial, you can also bookmark this for future or share with your friend struggling to Center a Div Happy Coding!