center-ish

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

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

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 — 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, anything. that day,
   the centering moves. 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 open>am I centered?</dialog>
<script>document.querySelector('dialog').showModal()</script>

.parent {
  position: absolute;
  top: 50vh;
  left: 0; right: 0;
}
#centerish {
  margin: 0 auto;
  transform: translateY(-50%);
}

html { scroll-padding-block: 50vh; }
:target { /* the centerish element, when fragmented */ }

#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>
<script>/* exists */</script>

<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> <!-- x10 -->
  <option>am I centered?</option>
  <option></option> <!-- x10 -->
</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 200ms';
  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
// 50 LOC of WebGL boilerplate omitted

// 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>

Galaxy-brain

.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%;
}

.page {
  mask-image: linear-gradient(transparent 40%, #000 40% 60%, transparent 60%);
}

#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; }
/* content: a single · */

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 embeds 50.html?d=2 ... -->
<iframe src="50.html?d=N+1" style="width:95%;height:95%"></iframe>