How to center div

Centering a div is a common task in web development. Below are several methods to achieve this, including a Bootstrap example.

Using Bootstrap's Flexbox Utilities

The outer div uses d-flex, justify-content-center, and align-items-center to center its content.

This div is horizontally and vertically centered using Bootstrap.

        
            
          <div class="d-flex justify-content-center align-items-center" style="height: 20vh;">
            <div class="bg-primary text-white p-3">
              <p>This div is horizontally and vertically centered using Bootstrap.</p>
            </div>
          </div>

Using CSS Margin Auto

The margin: auto; property centers the div by adjusting its left and right margins. Setting width to 50% makes the centering more visible.

This div is horizontally centered using CSS margin auto.

        
            
          <div style="width: 50%; margin: auto;" class="bg-primary text-white p-3">
            <p>This div is horizontally centered using CSS margin auto.</p>
          </div>

Using Grid Layout

The display: grid; and place-items: center; properties center the div horizontally and vertically.

This div is both horizontally and vertically centered.

        
            
          <div style="display: grid; place-items: center; height: 20vh;">
            <div class="bg-primary text-white p-3">
              <p>This div is both horizontally and vertically centered.</p>
            </div>
          </div>