Web Totals
Centering in CSS

Centering in CSS

#1. Content Center

HTML
<div class="content-center">...</div>
html
CSS
.content-center {
  display: grid;
  place-content: center;
  gap: 1ch;
}
css

#2. Gentle Flex

HTML
<div class="gentle-flex">...</div>
html
CSS
.gentle-flex {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1ch;
}
css

#3. Autobot

HTML
<div class="autobot">...</div>
html
CSS
.autobot {
  display: flex;
}
.autobot > * {
  margin: auto;
}
css

#4. Fluffy Center

HTML
<div class="fluffy-center">...</div>
html
CSS
.fluffy-center {
  padding: 10ch;
}
css

#5. Pop & Plop

HTML
<div class="parent">
  <div class="pop-plop">...</div>
</div>
html
CSS
.parent {
  position: relative;
}

/* Option 1 */
.pop-plop {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

/* Option 2 */
.pop-plop {
  position: absolute;
  inset: 0;
  margin: auto;
}
css