The Last Page You'll Visit to Center a DIV

Created with ❤️ for all the developers who've Googled "how to center a div" at least once

Methods

Method Horizontal Vertical Browser Support Best For
Flexbox ✅ ✅ IE11+, All modern browsers Multiple elements, responsive layouts
Grid ✅ ✅ IE11+ (partial), All modern browsers Complex layouts, 2D positioning
Absolute + Transform ✅ ✅ IE9+, All modern browsers Single elements, unknown dimensions
Absolute + Margin Auto ✅ ✅ IE8+, All modern browsers Single elements, known dimensions
Table Display ✅ ✅ IE8+, All modern browsers Simple layouts, vertical alignment
Line Height ✅ ✅ All browsers Single line text, icons
Margin Auto ✅ ❌ All browsers Block elements, horizontal centering
Calc Function ✅ ✅ IE9+, All modern browsers Precise positioning, known parent dimensions
Viewport Units ✅ ✅ IE9+, All modern browsers Full viewport centering

Generator

400px
300px
100px
100px 
.parent {
  display: flex;
  justify-content: center; /* Horizontal centering */
  align-items: center;     /* Vertical centering */
  width: 400px;
  height: 300px;
}

.child {
  width: 100px;
  height: 100px;
}

Flexbox

.parent {
  display: flex;
  justify-content: center; /* Horizontal centering */
  align-items: center;     /* Vertical centering */
  height: 300px;
}

/* That's it! The child will be centered */
<div class="d-flex justify-content-center align-items-center" style="height: 300px;">
  <div>Centered</div>
</div>
<div class="flex justify-center items-center h-[300px]">
  <div>Centered</div>
</div>

Grid

.parent {
  display: grid;
  place-items: center; /* Shorthand for align-items and justify-items */
  height: 300px;
}

/* That's it! The child will be centered */
<div class="d-grid" style="height: 300px; place-items: center;">
  <div>Centered</div>
</div>
<div class="grid place-items-center h-[300px]">
  <div>Centered</div>
</div>

Absolute + Transform

.parent {
  position: relative;
  height: 300px;
}

.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
<div class="position-relative" style="height: 300px;">
  <div class="position-absolute top-50 start-50 translate-middle">
    Centered
  </div>
</div>
<div class="relative h-[300px]">
  <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
    Centered
  </div>
</div>

Absolute + Margin Auto

.parent {
  position: relative;
  height: 300px;
}

.child {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 200px;
  height: 100px;
  margin: auto;
}
<div class="position-relative" style="height: 300px;">
  <div class="position-absolute" style="top: 0; right: 0; bottom: 0; left: 0; width: 200px; height: 100px; margin: auto;">
    Centered
  </div>
</div>
<div class="relative h-[300px]">
  <div class="absolute inset-0 w-[200px] h-[100px] m-auto">
    Centered
  </div>
</div>

Table Display

.parent {
  display: table;
  width: 100%;
  height: 300px;
}

.child {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}
<div class="d-table w-100" style="height: 300px;">
  <div class="d-table-cell text-center align-middle">
    Centered
  </div>
</div>
<div class="table w-full h-[300px]">
  <div class="table-cell text-center align-middle">
    Centered
  </div>
</div>

Line Height

.parent {
  height: 300px;
  line-height: 300px;
  text-align: center;
}

.child {
  display: inline-block;
  vertical-align: middle;
  line-height: normal;
}
<div class="text-center" style="height: 300px; line-height: 300px;">
  <div class="d-inline-block align-middle" style="line-height: normal;">
    Centered
  </div>
</div>
<div class="h-[300px] leading-[300px] text-center">
  <div class="inline-block align-middle leading-normal">
    Centered
  </div>
</div>

Margin Auto

.parent {
  height: 300px;
}

.child {
  width: 200px;
  margin: 0 auto; /* Horizontal centering only */
}
<div style="height: 300px;">
  <div class="mx-auto" style="width: 200px;">
    Centered
  </div>
</div>
<div class="h-[300px]">
  <div class="w-[200px] mx-auto">
    Centered
  </div>
</div>

Calc Function

.parent {
  position: relative;
  height: 300px;
}

.child {
  position: absolute;
  width: 200px;
  height: 100px;
  left: calc(50% - 100px); /* 50% - half of width */
  top: calc(50% - 50px);   /* 50% - half of height */
}
<div class="position-relative" style="height: 300px;">
  <div class="position-absolute" style="width: 200px; height: 100px; left: calc(50% - 100px); top: calc(50% - 50px);">
    Centered
  </div>
</div>
<div class="relative h-[300px]">
  <div class="absolute w-[200px] h-[100px] left-[calc(50%-100px)] top-[calc(50%-50px)]">
    Centered
  </div>
</div>

Viewport Units

.parent {
  height: 300px;
}

.child {
  width: 200px;
  height: 100px;
  margin-left: 50%;
  margin-top: 50vh;
  transform: translate(-50%, -50%);
}
<div style="height: 300px;">
  <div style="width: 200px; height: 100px; margin-left: 50%; margin-top: 50vh; transform: translate(-50%, -50%);">
    Centered
  </div>
</div>
<div class="h-[300px]">
  <div class="w-[200px] h-[100px] ml-[50%] mt-[50vh] -translate-x-1/2 -translate-y-1/2">
    Centered
  </div>
</div>