# How to center div vertically and horizontally

Add `.d-flex` to the parent element to create a flexbox container and transform into flex items.

Add `.align-items-center` to the parent element to center its content vertically.

Add `.justify-content-center` to the parent element to center its content horizontally.

## #1

[![first template](/assets/how-to.png)](https://mdbootstrap.com/how-to/bootstrap/center-div-vertically-and-horizontally/)

```html

<div class="d-flex align-items-center justify-content-center" style="height: 250px;">
    <div class="p-2 m-2 bg-info text-white shadow rounded-2">Flex item</div>
    <div class="p-2 m-2 bg-info text-white shadow rounded-2">Flex item</div>
    <div class="p-2 m-2 bg-info text-white shadow rounded-2">Flex item</div>
</div>

```

#### Much more examples and a detailed description can be found at [📄 Documentation page](https://mdbootstrap.com/how-to/bootstrap/center-div-vertically-and-horizontally/)