center-ish

50 slightly incorrect, hilarious, or infuriating ways
to vertically center content on a webpage

A field guide to centering content vertically on a webpage. The way it's done in the field. By people who are angry. Each technique is its own page. The dotted lines on each preview shows where the center is actually located.

Technically correct, theatrically wrong

<table border="2" cellpadding="20" cellspacing="0"
       width="100%" height="100%" bgcolor="#faf6e8">
  <tr>
    <td valign="middle" align="center">
      am I centered?
    </td>
  </tr>
</table>

display: grid;
grid-template-rows: repeat(50, 1fr);
place-items: center;
/* good luck explaining this in code review */

.parent { /* position: static, at least for now */ }

#centerish {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
/* one day .parent will gain position: relative for a tooltip, an overlay, or some
  other reason. That day, the centering will break and nobody will know why... */

body {
  display: flex;
  align-items: flex-start;     /* go top */
  align-items: flex-end;       /* no, bottom */
  align-items: center;         /* fine, center */
  justify-content: center;
}

#centerish {
  align-self: flex-start;      /* the top, please */
  align-self: stretch;         /* fill the whole thing */
  align-self: auto;            /* whatever the parent said */
}

html, body { height: 100vh; }

body {
  text-align: center;
  line-height: 100vh;
}
/* one line: centered. two lines: 200vh of content. */

<div>
  <div>
    <div>
      <div style="display: table-cell; vertical-align: middle; height: 100vh">
        ...
      </div>
    </div>
  </div>
</div>

#centerish {
  position: fixed;
  inset: 0;
  margin: auto;
  width: 300px;
  height: 80px;
}

body {
  aspect-ratio: 1;
  display: grid;
  place-content: center;
}

Off-by-half

#centerish {
  position: absolute;
  top: 50%;
  /* I'm sure that's enough */
}

#centerish { margin-top: 50%; }

#centerish { padding-top: 384px; }

#centerish {
  position: absolute;
  top: calc(50vh - 8px);
}

#centerish { vertical-align: middle; }

<center>am I centered?</center>

body { text-align: center; }

.row {
  display: flex;
  align-content: center; /* needs flex-wrap to do anything */
}

Cursed (but it works)

.box::before {
  content: "";
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}

#centerish {
  display: inline-block;
  vertical-align: middle;
}

.box {
  writing-mode: vertical-rl;
  text-align: center; /* now this means vertically */
}

<svg width="100%" height="100vh">
  <text x="50%" y="50%" text-anchor="middle" dominant-baseline="middle">hi</text>
</svg>

<dialog id="centerish">am I centered?</dialog>
<script>centerish.showModal()</script>

.parent {
  position: absolute;
  top: 50vh;
  left: 0;
  right: 0;
}

#centerish {
  margin: 0 auto;
  transform: translateY(-50%);
}

html { scroll-padding-block: 50vh; }

#centerish {
  position: sticky;
  top: 50vh;
}

<details style="display: grid; place-items: center; height: 100vh">
  <summary>am I centered?</summary>
</details>

const c = canvas.getContext('2d');
c.textBaseline = 'middle';
c.textAlign = 'center';
c.fillText('am I centered?', canvas.width/2, canvas.height/2);

HTML crimes

<br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br>
am I centered?

     
     
am I centered?

.spacer {
  float: left;
  height: 50vh;
  margin-bottom: -90px;        /* = -(content / 2) */
}

#centerish {
  clear: left;
  height: 180px;
  margin: 0 auto;
}

<marquee direction="up" behavior="alternate"
         height="100vh" scrollamount="3">
  am I centered?
</marquee>

<noscript>
  <style>#centerish{display:grid; place-items:center; height:100vh}</style>
</noscript>

<div>
  <div>
    <div>
      <div>
        <div>
          ... (47 more) ...
          am I centered?
        </div>
      </div>
    </div>
  </div>
</div>
/* every div: padding-top: 1% */

<div style="display: flex; flex-direction: column;
    height: 100vh">
  <hr style="flex: 1">
  am I centered?
  <hr style="flex: 1">
</div>

<select size="21" style="height: 100vh; width: 100%">
  <option></option> <!-- 10 times -->
  <option>am I centered?</option>
  <option></option> <!-- 10 times -->
</select>

JS atrocities

function tick() {
  el.style.top = (innerHeight - el.offsetHeight) / 2 + 'px';
  requestAnimationFrame(tick);
}
tick();

setInterval(() => {
  el.style.top = (innerHeight - el.offsetHeight) / 2 + 'px';
}, 16);

const o = new MutationObserver(() => {
  el.style.top = (innerHeight - el.offsetHeight) / 2 + 'px';
});
o.observe(document.body, { attributes: true, subtree: true });

addEventListener('resize', () => {
  el.style.transition = 'top 2000ms';
  el.style.top = (innerHeight - el.offsetHeight) / 2 + 'px';
});

// vertex shader: gl_Position = vec4(pos, 0, 1);
// quad spans (-0.4, -0.1) to (0.4, 0.1)
// text drawn to canvas, used as texture

// worker.js
setInterval(() => postMessage(window.innerHeight / 2), 100);
// main
worker.onmessage = e => el.style.top = e.data + 'px';

<script>
  document.write('<style>#centerish{display:grid;place-items:center;height:100vh}</style>');
</script>

Mind=blown

.outer {
  container-type: size;
  height: 100vh;
}

@container (height: 800px) {
  #centerish { /* the centering rules */ }
}

@media print {
  #centerish {
    display: grid;
    place-items: center;
    height: 100vh;
  }
}

.anchor {
  position: absolute;
  top: 50vh;
  left: 50vw;          /* anchor is centered the OLD way */
  width: 0;
  height: 0;
  anchor-name: --middle;
}

#centerish {
  position: absolute;
  position-anchor: --middle;
  top: anchor(center); /* defer to the anchor we just placed */
  left: anchor(center);
  translate: -50% -50%;
}

button#centerish {
  width: 100vw;
  height: 100vh;
  appearance: none;
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: inherit;
  /* the UA stylesheet does the centering */
}

#centerish {
  height: 100vh;
  width: 100vw;
  line-height: 1.3;
  font-size: 7vh; /* TODO: explain calculation */
}

<input type="image" alt="am I centered?"
       style="position: absolute; top: 50%; left: 50%;
              transform: translate(-50%,-50%)">

.box {
  font-size: 50vh;
  line-height: 0;
}

body:has(#centerish:focus) {
  display: grid;
  place-items: center;
  height: 100vh;
}

<iframe srcdoc="<style>body{display:grid;place-items:center;height:100vh;margin:0}</style>am I centered?"></iframe>

<!-- 50.html embeds 50.html?d=1, which embeds 50.html?d=2, ... -->
<iframe src="50.html?d=N+1" style="width: 95%; height: 95%"></iframe>