# An Easy Way to Center a DIV both Vertically and Horizontally
This is a common problem that beginners face which seems to have no particular solution because there are many ways to achieve this. For almost every project I did, when starting out, I was searching the internet whenever I wanted to centre a div both horizontally and/or vertically. I came across one really **easy way** to achieve this while I was doing an online course, and I have since decided to stick to this method(using the flexbox) except in distinct cases.
In this article, I would describe how a div which is on a page, inside another element or div can be:
- Centred vertically
- Centered horizontally
- Centred both vertically and horizontally
### Centering a div vertically
To center a div vertically, you do this:
```
```
The code above gives this as an output:
From the image above, we see that the 'shape' div is not centered vertically, to achieve this:
- Add 'display: flex' and
- Add 'align-items: center' to the parent element which is the '.container' , as shown below:
```
```
This is the output:
The 'shape' div has been centered vertically. Next, we horizontally center the div.
### Centering the div horizontally
We follow the same steps above to horizontally center the div except that we now **use 'justify-content: center' instead of 'align-items: center'**
- Adding the 'display: flex' and
- Adding 'justify-content: center' to the CSS properties of the parent element which is '.container' here.
This is shown in the code below:
```
```
The output below shows a div which has been centered horizontally:
Next, we center the div both horizontally and vertically
### Centering the div both horizontally and vertically
This is a combination of the two initial steps, we achieve this by:
- Adding the 'display: flex'
- Adding the 'align-items: center'
- Adding the 'justify-content: center'
This is shown below:
```
```
The output is shown here:
We see that the div is now centered both vertically and horizontally.
**Thanks for reading this! I hope it was really helpful, I would love to hear your comments.**