--- id: howto-css-center-website title: "How To - Center Website" category: "Web_Recipes" status: "draft" verification_status: "conceptual" canonical_id: "" aliases: ["margin auto center page", "center page horizontally CSS"] duplicate_of: "" source_trust_level: "B" confidence_score: 0.82 created_at: 2026-07-04 updated_at: 2026-07-04 review_reason: "" merge_history: [] tags: ["howto", "css", "w3schools", "layout", "centering"] raw_sources: ["https://www.w3schools.com/howto/howto_css_center_website.asp"] applied_in: [] github_commit: "" --- # [[HOWTO CSS Center Website]] ## 🎯 ν•œ 쀄 톡찰 (One-line insight) `margin: auto` only centers a block horizontally if the element has an EXPLICIT width (here via `max-width`) β€” an unconstrained block always stretches to fill its parent, leaving no leftover space for the browser to distribute as equal left/right margins, which is the entire reason this recipe pairs `max-width: 500px` with `margin: auto` rather than using either alone; this is the simplest of all the centering recipes in this cookbook because it needs neither `position`, `transform`, nor Flexbox β€” just a width constraint plus auto margins. [S1] ## 🧠 핡심 κ°œλ… (Core concepts) - **`margin: auto` requires a constrained width** β€” auto margins only distribute leftover horizontal space; a full-width block has none to distribute. [S1] - **`max-width` instead of `width`** β€” allows the content wrapper to shrink on narrow viewports (spanning the full page below the breakpoint) while capping its width on wide screens. [S1] - **No positioning/transform/flexbox needed** β€” the simplest technique in this cookbook's centering family, applicable to whole-page content wrappers rather than individual elements. [S1] ## πŸ“– μ„ΈλΆ€ λ‚΄μš© (Details) - `.content { max-width: 500px; margin: auto; }` applied to a wrapper `
` directly inside ``. [S1] - Below 500px viewport width, the content spans the full page (since `max-width` stops constraining once the viewport is narrower than it). [S1] ## βš–οΈ λͺ¨μˆœ 및 μ—…λ°μ΄νŠΈ (Contradictions & updates) μ—†μŒ β€” μ‹ κ·œ λ ˆμ‹œν”Ό, κΈ°μ‘΄ λ¬Έμ„œμ™€ λͺ¨μˆœλ˜λŠ” λ‚΄μš© μ—†μŒ. ## πŸ› οΈ 적용 사둀 (Applied in summary) νŽ˜μ΄μ§€ μ½˜ν…μΈ λ₯Ό 500px 폭으둜 μ œν•œν•˜κ³  margin:auto둜 κ°€λ‘œ 쀑앙 μ •λ ¬ν•΄, 500px보닀 쒁은 ν™”λ©΄μ—μ„œλŠ” 전체 폭을 μ°¨μ§€ν•˜κ²Œ λ§Œλ“œλŠ” μ˜ˆμ œκ°€ μ›λ¬Έμ—μ„œ 직접 μ œμ‹œλ¨. [S1] ## πŸ’» μ½”λ“œ νŒ¨ν„΄ (Code patterns) Centering a whole page's content with max-width + margin:auto (CSS): ```css .content { max-width: 500px; margin: auto; } ``` ## βœ… 검증 μƒνƒœ 및 신뒰도 - **μƒνƒœ:** draft - **검증 단계:** conceptual - **좜처 신뒰도:** B (W3Schools β€” widely used educational reference) - **μ‹ λ’° 점수:** 0.82 - **쀑볡 검사 κ²°κ³Ό:** μ‹ κ·œ 생성 (New discovery) ## πŸ”— 지식 κ·Έλž˜ν”„ (Knowledge Graph) - **μƒμœ„/루트:** [[W3Schools HOW TO]] - **κ΄€λ ¨ κ°œλ…:** [[HOWTO CSS Center Button]], [[HOWTO CSS Full Page]] - **μ°Έμ‘° λ§₯락:** CSS Layout & Positioning μ„Ήμ…˜. ## πŸ“š 좜처 (Sources) - [S1] W3Schools β€” How To - Center Website β€” https://www.w3schools.com/howto/howto_css_center_website.asp ## πŸ“ λ³€κ²½ 이λ ₯ (Change history) - 2026-07-04: Initial draft synthesized from the W3Schools "How To - Center Website" recipe (Astra wiki-curation, P-Reinforce v3.1 format).