How to Center a DIV
Tags: webdev, writing, programming, css
Published: 2024-05-21 10:28:59

[Introduction](#introduction)
[Prerequisites](#prerequisites)
[The Box Model](#the-box-model)
[How to Center a Div in CSS](#how-to-center-a-div-in-css)
[How to Center a Div Horizontally](#how-to-center-a-div-horizontally)
[How to Center a Div Vertically](#how-to-center-a-div-vertically)
[Centering both Horizontally and Vertically](#centering-both-horizontally-and-vertically)
[Comparing the Techniques](#comparing-the-techniques)
[Conclusion](#conclusion)

---

### Introduction
The difficulty of centering divs has to be one of the most "memeable" topics in programming. Fear not, however, gone are the days of [IE5](https://en.wikipedia.org/wiki/Internet_Explorer_5), CSS isn't tables and floats anymore, today with techniques using innovations like [Flexbox](https://www.w3schools.com/css/css3_flexbox.asp), or even CSS Grid, centering DIVs has never been easier.

[Div](https://www.w3schools.com/tags/tag_div.ASP), short for content division element, defines a division in an HTML document. It is a generic block-level element that serves as a container for HTML elements, which can then be styled and manipulated with CSS and Javascript.

So, how the heck do you center a div?

In this article, I'll take you through the different techniques used in centering divs, from horizontal centering to vertical, centering texts, and even centering both ways simultaneously.

## Prerequisites

- Preliminary knowledge of HTML

- Basic CSS knowledge

## The Box Model

![CSS Box Model](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/32fot3q602js6o41ilnj.png)

Before I get into centering techniques, I must first make sure you understand the CSS box model.

Every HTML element is its own box, with its spacing and border, this is called the box model. It contains four properties, margin, border, padding and your content, which can then be styled or manipulated however you see fit.

The margin property creates a margin around your selected content, and the padding property, which is a close relative of the margin creates spaces inside the edges of your div container. This means that it adds spaces **between** the content and the edges of the container.

Therefore, whereas margin creates space on the **outside**, padding creates space on the **inside** of your selected element.

Finally, the border property controls the border **between** the margin and the padding.

What you should remember is this:

- Margin (Spacing on the outside)

- Border (The in-between)

- Padding (Spacing on the inside)

- Content (The content itself)

## How to Center a Div in CSS
Understanding how to center divs and text within divs is a valuable skill for beginners and seasoned developers alike.

To create visually stunning layouts, knowing how to center divs will help in arranging and styling elements on your page.

Although I mentioned earlier that centering divs today has never been easier, I must admit that this task might prove surprisingly intricate and confusing due to the nuances of CSS and the various scenarios in which centering may be required.

In this guide, I'll cover the various methods to center a div depending on the specific requirement of your project, and the context of your design.

## How to Center a Div Horizontally
To center a div horizontally on a page, you can try the following:

1.**Margin: auto**
Here you can leverage the `margin:auto;` property by setting the left/right margins to auto. When centering elements horizontally using the margin property, three things must be considered:

(A). **Display should be set to block**: This allows for no other elements besides the current one. It takes ownership of the horizontal space of the element. However, since divs are block-level elements, this step can be omitted if your content is within a div.

(B). **Must have a width**: An item cannot be centered within a browser if it is wider than the browser itself. Therefore, your element must have a set width.

(C). **Margin left/right set to auto**: 'Auto' means 'take up all the space', and since this is a `display: block;` element, the space would be what's left after your content has taken up the required pixels in width. The margin left/right being set to auto centers the div since they are being pushed against each other.

You can also use the shorthand `margin` property with the value `0 auto` to center divs.

```
<div class="center">
  <img src="cat.jpg" alt="cat sleeping on rug">
</div>

<!--This is a simple code snippet showing an image of cat contained
within a div element-->
<!--This div can now be styled using css -->
```
To center the cat image in CSS, you'll code:

```
.center {
width: 50%;
margin: 0 auto;
}

/*Here, display:block; isn't used because the div is already a
block-level element*/
```
Setting the margin-top to 0, and the horizontal margin to auto using the shorthand property removes the margin-top and horizontally centers the image. Therefore, the output will be:


![centered image of a cat sleeping on a rug](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r8vm5oqwsk2mcn66r732.png)

2.**Flexbox centering**
Introduced in [CSS3](https://www.simplilearn.com/difference-between-css-and-css3-article#:~:text=CSS3%2C%20also%20known%20as%20Cascading,more%20attractive%20and%20user%2Dfriendly.), Flexbox has revolutionized how we design layouts by providing a better way to arrange, align, and distribute space among items within a container.

It is the most modern method to center elements on a page. To ensure that Flexbox creates the appropriate row/column you want, wrap your desired row/column in a `<div>` element.

A Flexbox layout always contains a container and its direct children. To use Flexbox, you need to give an element a '**display**' property of '**flex**'. This will make the element a '**flex container**', and any direct children of a flex container are called '**flex items**'.

To begin create a `div` and give it a class of container, using the above cat example create an `img` element with `src` and `alt` attributes.

```
<div class="container">
    <img src="cat.jpg" alt="cat sleeping on rug">
 </div>
```

```
.container{
 display: flex;
 justify-content: center;
 }
 /* justify-content set to center centers the cat image */
```
Output:

![centered image of a cat sleeping on a rug](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iytg7uajhmwi5pdo6xmu.png)

At its core, Flexbox takes every single item and turns it into a row or column depending on its `flex-direction`. Note that Flexbox only turns into rows/columns "direct children" elements.

3.**Text Align set to Center**
To center texts properly, use the `text-align` property in CSS and give it a value of `center`.

```
 <div class="center-text">
 Centered Text
 </div>
```

```
 .center-text {
             text-align: center;
             background-color: lightblue;
             padding: 20px;
         }
```
The output looks like this, you can see the words 'centered text' have been effectively centered on our page.

![centered text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xiclm9xwr4ywlf312868.png)

4.**CSS Grid**
This is a layout grid system in CSS that allows us to create web layouts easily. Using CSS Grid you can define a grid structure and place items within the grid. This gives us total control over the alignment and positioning of our elements.

Although CSS Grid is primarily used for grid-based designs, it can also be used to center elements easily.

```
<div class="container">
   <div class="center-grid">Grid Layout Horizontal Centering.</div>
 </div>
```

```
.container {
             display: grid;
             place-items: center; /* centers the child horizontally */
             background-color: pink;
             height: 100vh; /* just for this example */
         }
         .center-grid {
             background-color: lightseagreen;
             width: 50%;
             text-align: center;
```
Output:

![centered element](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m48wd0vz1ylidqbm4l0q.png)

## How to Center a Div Vertically
To center a div vertically on a page, you can try the following:

1.**Using CSS Position and Transform Properties**
The position property in CSS specifies the kind of positioning method used for an element on your page. It changes an element's position in your document flow, which can affect the layout of other elements on your page.

On the other hand, CSS translate is a transform function that can move an element without affecting the layout of other elements on your page.

Combining these two properties can help you center a div. The position property will affect the element's position on your page while the translate function will move the element from that particular position.

In this case, we're going to set our `position` property to `relative`. An element with `position: relative;` is positioned relative to its normal/default position. Then shift the element 50% from the top and 50% from the left to align it at the center. Now add the `transform` property and set it to `translate` with the value **-50%** to effectively center it.

```
 <div class="container">
   <div class="position-transform">
   Vertical Centering
 </div>
 </div>
```

```
.container{
   position: relative;
             height: 100vh;
             background-color: black;
 }
 .position-transform {
             position: relative;
             top: 50%;
             left: 50%;
             transform: translate(-50%, -50%);
             background-color: pink;
 }
```
The output looks like this:

![vertically centered element](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4rz4ahgry05t7jwyhdpv.png)

2.**CSS Grid**
CSS Grid can also be used for vertical centering. All you need to do is give your element a `display` of `grid`, then align the item to the center.

```
 <div class="container">
   <div class="vertical-grid">
   Vertical Centering
 </div>
 </div>
```

```
.container{
             display: grid;
             align-items: center;
             background-color: coral;
             height: 100vh; 
          }
 .vertical-grid {
             background-color: lightseagreen;
             width: 100%;
             }
```
Output:

![vertically centered element](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5rdilxckkq5azyjyud9x.png)

3.**Flexbox centering**
As I mentioned above, Flexbox is a one-dimensional CSS layout that controls how items are aligned or spaced within a container. This means you can also center elements vertically using Flexbox.

To begin create a container div and an additional div nested inside setting its class to 'vertical-flex'. Then in CSS, give your element a `display` of `flex` and align it to the center.

```
.container{
     display: flex;
             align-items: center;
             background-color: grey;
             height: 100vh; 
 }
 .vertical-flex {    
   background-color: lightcoral;
             width: 50%;
 }
```
Output:

![vertically centered element](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/udh8v7awplax7gm7p93c.png)

## Centering both Horizontally and Vertically

1.**CSS Grid**
To center an element both ways using CSS Grid, establish grid by giving your container a display property of grid, then place your content to the center by using the `place-item` property.

```
.container{
          display: grid;
             place-items: center;
             background-color: lightgray;
             height: 100vh; 
 }
 /* place-item centers your content both ways while 
 align-item only vertically centers your content*/

 .horizontal-vertical-grid {
        text-align: center;
   background-color: rgb(127,255,127);
             width: 50%;
 }
```
Output:

![horizontally and vertically centered element](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bqodjmofhqn4gbmyp2x6.png)

2.**Flexbox**
Flexbox is versatile and can also handle both horizontal and vertical centering easily. Establish Flexbox by giving your container element a `display` of `flex`, justify your content by setting it to center, and align your content to the center to vertically center it.

```
.container{
             display: flex;
            justify-content: center;
             align-items: center;
             background-color: grey;
             height: 100vh; 
 }
 .horizontal-vertical-flex {
        text-align: center;
   background-color: orange;
             width: 50%;
 }
```
Output:

![horizontal and vertically centered element](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eyueopidxksfqnh42rlw.png)

3.**Using Positioning**
Combine absolute positioning with the transform function to center both ways.

```
.container{
        position: relative;
             height: 100vh;
             background-color: lightgray; 
 }
 .center-absolute {
             position: absolute;
             top: 50%;
             left: 50%;
             transform: translate(-50%, -50%);
             background-color: lightpink;
             width: 50%;
             text-align: center;
         }
```
Output:

![vertical and horizontally centered element](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rlmqz57lpr601ix7but3.png)

## Comparing the Techniques
Each centering technique has its pros and cons, depending on the specific requirements of your design and your personal preference.

`Margin: auto;` requires less code and is simple to implement, it is perfect for horizontally centering elements with a fixed width. Flexbox gives you control over the alignment of your elements with properties like `align-items` and `justify-content`.

CSS Grid being two-dimensional takes things a step further by providing control over both rows and columns at the same time. Positioning is flexible and can be used to center elements regardless of their dimensions or the container's dimensions.

Flexbox and CSS Grid are probably the most versatile methods for centering, as they are modern and suitable for most responsive design needs. A good understanding of the strengths and limitations of each approach will help you make informed decisions when centering.

Coding is a skill, and like all skills, centering divs require some practice. As renowned author Norman Vincent Peale stated:

> Nobody ever mastered any skill except through intensive persistent and intelligent practice.

Remember, keep practising and soon you'll be centering divs like a master developer!

## Conclusion
From basic CSS properties to more advanced methods, I have covered various ways you can center a div. Understanding the box model principle and exploring the various centering techniques will help you create visually appealing layouts and user-friendly interfaces.

Happy coding besties!