Design Atlas
한국어
▦ Layout

Cover layout

커버 레이아웃

Keeps a central element vertically centered no matter which surrounding elements exist — powered entirely by margin-block: auto.

Also known as: Every Layout Cover
···
html
<div class="frame">
  <div class="cover" id="cover">
    <header id="chdr">Header</header>
    <div class="centered">Centered</div>
    <footer id="cftr">Footer</footer>
  </div>
</div>
css
.frame{width:min(58%,200px);height:min(92%,290px);border:1px solid var(--line);border-radius:12px;overflow:hidden;
  box-shadow:0 8px 24px rgba(0,0,0,.12);background:var(--bg)}
.cover{display:flex;flex-direction:column;min-height:100%;padding:10px;gap:0}
.cover header,.cover footer{background:var(--surface);border:1px solid var(--line);border-radius:6px;
  padding:8px;text-align:center;font-size:10px;font-weight:700;color:var(--muted);flex-shrink:0;transition:opacity .4s}
.centered{margin-block:auto;background:var(--accent);color:#fff;border-radius:8px;padding:14px;text-align:center;
  font-size:12px;font-weight:800}
js
const chdr = document.getElementById('chdr');
const cftr = document.getElementById('cftr');
const states = [
  [true, true],
  [false, true],
  [true, false],
  [false, false],
];
let i = 0;
function apply() {
  const [h, f] = states[i % states.length];
  chdr.style.display = h ? 'block' : 'none';
  cftr.style.display = f ? 'block' : 'none';
  i++;
}
apply();
setInterval(apply, 1700);

Inside a container set to display: flex; flex-direction: column; min-height: 100%, give the element you want centered margin-block: auto (auto on both top and bottom). Flexbox's auto margins absorb all the leftover space in their direction, so the top and bottom margins grow equally and land the element exactly in the middle.

What makes it special is that the same code works whether a header or footer exists or not. With a header present, margin-block: auto centers within "the space between the header's bottom and the footer's top"; remove the header, and that available space simply expands — nothing in the code has to change. position: absolute plus transform: translateY(-50%) can't offer that flexibility, since it ignores the parent's actual content and always pins dead center regardless of siblings.

It's exactly the pattern for a hero section that needs to fill the full viewport height while carrying a logo or a single line of copy stacked on top.

When to use

Use it for full-screen heroes, login screens, or 404 pages — anywhere content needs to occupy the whole viewport while staying centered within it.