Vertically Center Element

• Vertically Center Element
  • Vertically & Horizontally Center A Text/Element Inside A Fixed Size Div
    • Output
    • Code Structure
  • Old Way To Vertically Center An Element
  • Vertically Center Using Relative-Absolute Position
  • Vertically Center Using Grid

Vertically & Horizontally Center A Text/Element Inside A Fixed Size Div

Output

Code Structure

.vertical-horizontal-center-element {
  display: flex;
  /* justify-content will align it horizontally */
  justify-content: center;
  /* align-items will align it vertically */
  align-items: center;
  height: 50vh;
}

<div class="vertical-horizontal-center-element">
  Vertically Center Text/Element Inside a Fixed Size Div
</div>

Example: Vertically and Horizontally Centered Element

---

Old Way To Vertically Center An Element

Old way was to use display:table and set its child to display:table-cell and set it to vertical-align:middle

.table {
  display: table;
  height: 50vh;
  width: 100%;
  text-align: center;
}
.table h1 {
  display: table-cell;
  vertical-align: middle;
}

<div class="table">
  <h1>Centered</h1>
</div>

Example Link

---

Vertically Center Using Relative-Absolute Position

.parent {
  position: relative;
  height: 50vh;
}

.child {
  position: absolute;
  top: 50%;
  width: 100%;
  transform: translateY(-50%);
  text-align: center;
}

OR

.parent {
  position: relative;
  height: 50vh;
}

.child {
  width: fit-content;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  height: fit-content;
}

<div class="parent">
  <p class="child">Centered Using Relative-Absolute Positioning</p>
</div>

Example Link

---

Vertically Center Using Grid

.grid {
  display: grid;
  align-items: center;
  justify-content: center;
  height: 50vh;
}

OR using place-items which is short hand for align-items and justify-items

.grid-pi {
  display: grid;
  place-items: center;
  height: 50vh;
}

OR Using Margins with Grid

.grid-margin {
  display: grid;
  height: 50vh;
}

.grid-margin-child {
  margin: auto;
}

<div class="grid">
  <p>Centered Using Grid</p>
</div>
<div class="grid-pi">
  <p>Centered Using Grid Place Items</p>
</div>
<div class="grid-margin">
  <div class="grid-margin-child">Centered Using Grid and Margins</div>
</div>

Example Link

Grid and Flex compared to table and relative-absolute, only has to be applied for parent and not for child.

For Grid and Flexbox, auto margin on top and bottom will center them. But on block level it will not work.