#   

## Overview

It is very essential to center a `div` horizontally and vertically on our web pages especially while making a card or image gallery.
* **Horizontally centered**: It means adding a `div` in the middle of the container or page on the x-axis.
* **Vertically centered**: It means adding a `div` in the middle on the y-axis.


## Horizontally centered

To center any `div` horizontally relative to any `div` or container, we just have to apply `margin:auto` and width which is relative to the containing element. Our styles should look like the following:


```
.middle{
  background-color: green;
  height: 300px;
  width: 80%;
  margin: auto;
          }
```

See the code snippet and output below.

<html>
 <head>
      <style>
          .middle{
              background-color: green;
              height: 300px;
              width: 80%;
              margin: auto;
              text-align: center;
          }
      </style>
   
 </head>
 <body>
   <div class="middle">
     This div will be centered on this page horizontally.
   </div>
 </body>
</html>

codemirror

#   

## Explanation
* Lines 1 and 19 : The start and close of the `html` tag.

* Lines 2–13 : We start the `head` tag which contains the `style` tag which contains the style for the `.middle` div. 

* Lines 14–17 : We have the `body` tag which contains the `div` which is to be centered.


## Vertically centered


To center the `div` element vertically, we just have to:

* Give a postion value to our `div` either relative or absolute depending.

* Make the `top:50%;` and 
* Add a `transform:translate` coordinate values.
We should have something like below.


```
.middle {
position: absolute;
top: 50%;
transform: translate(0, -50%);
}
```

<html>
 <head>
      <style>
         .middle {
            position: absolute;
            top: 50%;
            height:40px;
            transform: translate(0, -50%);
            background-color:yellow;
        }
      </style>
 </head>
 <body>
   <div class="middle">
     This div will be centered on this page veritically.
   </div>
 </body>
</html>

#   


As you can see from the output above, our `div` is in the middle of the display pane vertically.

## Explanation
* Lines 1 and18 : The start and close of the `html` tag.

* Lines 2–12 : We start the `head` tag which contains the `style` tag which contains the style for the `.middle` div. 

* Lines 13–17 : We have the `body` tag which contains the `div` which is to be centered.



## Combination of both horizontal and vertical `divs`
We can combine the style blocks for the horizontal and vertical centering, to get a `div` which is centered on a page.

But then, we can apply this style below to achieve that in a much cooler way.



```
.middle{
 width:90%;
 position: absolute;
 top: 50%;
 left: 50%;
transform: translate(-50%,-50%);
  }
```
## Example
The code snippet below shows how a `div` can be placed at the center of a page.

<html>
 <head>
      <style>
         .middle{
            width:80%;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            background-color:blue;
            height:220px;
            color:white;
            text-align:center;
  }
      </style>
 </head>
 <body>
   <div class="middle">
     This div will be centered on this page both veritically and horizontally.
   </div>
 </body>
</html>

#   

## Explanation
* Lines 1 and 22 : The start and close of the `html` tag.

* Lines 3–16 : We start the `head` tag which contains the `style` tag. The `style` tag contains the style for the `.middle` div. In this style the `div` is given position absolute, with top and left distances of 50%, this will center the `div` but with some bias. But with the `transform: translate(-50%,-50%)` piece the `div` happens to be position correctly at the center, eliminating the bias.

* Lines 17–21 : We have the `body` tag which contains the `div` which is to be centered.

How to center a div vertically and horizontally

Center a div horizontally with `margin:auto;` and vertically with `position:absolute; top:50%; transform:translate(0,-50%);`. Combine for full centering.

How to center a div vertically and horizontally

Overview

Horizontally centered

Explanation

Vertically centered

Explanation

Combination of both horizontal and vertical divs

Example

Explanation

Combination of both horizontal and vertical `divs`