bootstrap-center-div-vertically-and-horizontally

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

<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