2nd/10_Wiki/Dev/Topic_HOWTO/HOWTO_CSS_Center_Vertical.md

id, title, category, status, verification_status, canonical_id, aliases, duplicate_of, source_trust_level, confidence_score, created_at, updated_at, review_reason, merge_history, tags, raw_sources, applied_in, github_commit

id	title	category	status	verification_status	canonical_id	aliases	duplicate_of	source_trust_level	confidence_score	created_at	updated_at	review_reason	merge_history	tags	raw_sources	applied_in	github_commit
howto-css-center-vertical	How To - Center Elements Vertically	Web_Recipes	draft	conceptual		vertical centering CSS transform translateY center		B	0.84	2026-07-04	2026-07-04			howto css w3schools layout centering flexbox	https://www.w3schools.com/howto/howto_css_center-vertical.asp

HOWTO CSS Center Vertical

🎯 한 줄 통찰 (One-line insight)

This page teaches THREE distinct centering techniques and, notably, does NOT declare one universally superior — the position: absolute + transform: translate(-50%, -50%) method centers an element whose OWN size is unknown at author time (the negative-percentage transform shifts it back by exactly half of ITS OWN rendered width/height, computed at runtime), while the third technique (display: flex; justify-content: center; align-items: center;) achieves the identical visual result with far less code but requires flex layout on the PARENT rather than absolute positioning on the child — two fundamentally different mechanisms (offset math vs. layout algorithm) converging on the same output. [S1]

🧠 핵심 개념 (Core concepts)

• Vertical-only centering — position: absolute; top: 50%; transform: translateY(-50%); on a container with position: relative. [S1]
• Vertical + horizontal centering (absolute method) — position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); — the transform shifts the element back by half its OWN width/height, which is why it works regardless of the element's actual size. [S1]
• Flexbox method — display: flex; justify-content: center; align-items: center; on the PARENT centers ANY child, both axes, with no transform math at all. [S1]
• -ms-transform prefix — included alongside the standard transform property for older IE/Edge compatibility. [S1]

📖 세부 내용 (Details)

• Vertical-only: .container { height: 200px; position: relative; } .vertical-center { margin: 0; position: absolute; top: 50%; transform: translateY(-50%); }. [S1]
• Both axes (absolute method): .center { margin: 0; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }. [S1]
• Both axes (flexbox method): .center { display: flex; justify-content: center; align-items: center; height: 200px; }. [S1]

⚖️ 모순 및 업데이트 (Contradictions & updates)

없음 — 신규 레시피, 기존 문서와 모순되는 내용 없음.

🛠️ 적용 사례 (Applied in summary)

같은 텍스트를 세로만 중앙 정렬, 세로+가로 중앙 정렬(absolute), 그리고 flexbox로 중앙 정렬하는 3가지 방식이 원문에서 나란히 비교 제시됨. [S1]

💻 코드 패턴 (Code patterns)

Three centering techniques compared — absolute+transform vs. flexbox (CSS):

/* Absolute + transform -- works for unknown element size */
.center-absolute {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
}

/* Flexbox -- simplest, centers any child on both axes */
.center-flex {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
}

✅ 검증 상태 및 신뢰도

• 상태: draft
• 검증 단계: conceptual
• 출처 신뢰도: B (W3Schools — widely used educational reference)
• 신뢰 점수: 0.84
• 중복 검사 결과: 신규 생성 (New discovery)

🔗 지식 그래프 (Knowledge Graph)

• 상위/루트: W3Schools HOW TO
• 관련 개념: HOWTO CSS Center Button, HOWTO CSS Center List, HOWTO CSS Split Screen
• 참조 맥락: CSS Layout & Positioning 섹션.

📚 출처 (Sources)

• [S1] W3Schools — How To - Center Elements Vertically — https://www.w3schools.com/howto/howto_css_center-vertical.asp

📝 변경 이력 (Change history)

• 2026-07-04: Initial draft synthesized from the W3Schools "How To - Center Elements Vertically" recipe (Astra wiki-curation, P-Reinforce v3.1 format).