Ways to center a div component in HTML

Centering a div component in HTML for different reasons and scenario can lead to different methods. Whether your alignment requirement is horizontal, vertical or both, here are some effective methods to achieve this.

Using CSS Flexbox

CSS Flexbox provides a easy way to center a div component, by aligning itself within a container. To center a div horizontally and vertically:

<style>
  .container {
    display: flex;
    justify-content: center; /* Horizontal centering */
    align-items: center; /* Vertical centering */
    height: 100vh; /* Ensure full viewport height */
  }
</style>

<div class="container">
  <!-- Your content here -->
</div>

Using CSS Grid

CSS Grid gives more control over the alignments than flexbox. It provides a precise control by giving a 2 dimensional grid layout.

<style>
  .container {
    display: grid;
    place-items: center; /* For aligning both horizontally and vertically */
    height: 100vh; /* Ensure full viewport height */
  }
</style>

<div class="container">
  <!-- Your content here -->
</div>

Utilize Absolute Positioning

Absolute positioning allows for precise placement of elements within a container. You can position an element exactly where you want it relative to its parent container.

<style>
  .parent {
    position: relative;
    height: 100vh; /* Ensure full viewport height */
  }

  .child {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
</style>

<div class="parent">
  <div class="child">
    <!-- Your content here -->
  </div>
</div>

Margin Auto Method

This method is suitable for horizontally centering a div within its parent container:

<style>
  .container {
    width: 50%; /* Set a width to the container */
    margin: 0 auto; /* Automatically adjust left and right margins */
  }
</style>

<div class="container">
  <!-- Your content here -->
</div>

Using CSS Table Display

Though this method is less common, CSS table display properties can also be used to center a div:

<style>
  .container {
    display: table;
    width: 100%; /* Set full width */
    height: 100vh; /* Ensure full viewport height */
  }

  .content {
    display: table-cell;
    text-align: center; /* Horizontal centering */
    vertical-align: middle; /* Vertical centering */
  }
</style>

<div class="container">
  <div class="content">
    <!-- Your content here -->
  </div>
</div>