Centering in CSS

2023-05-12 | 1 min read

#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