2nd/10_Wiki/Topic_CSS/CSS_Image_Centering.md

---
id: css-image-centering
title: "CSS Image Centering"
category: "Frontend"
status: "draft"
verification_status: "conceptual"
canonical_id: ""
aliases: ["center image", "center an image", "margin auto image", "flexbox center image", "grid center image"]
duplicate_of: ""
source_trust_level: "B"
confidence_score: 0.88
created_at: 2026-06-23
updated_at: 2026-06-23
review_reason: ""
merge_history: []
tags: ["css", "web", "frontend", "w3schools", "images", "layout"]
raw_sources: ["https://www.w3schools.com/css/css3_image_center.asp"]
applied_in: []
github_commit: ""
---

# [[CSS Image Centering]]

## 🎯 한 줄 통찰 (One-line insight)
An image can be centered horizontally with `display: block` plus `margin: auto`, or both horizontally and vertically by wrapping it in a flexbox or grid container. [S1]

## 🧠 핵심 개념 (Core concepts)
- **margin auto needs a block** — to center an image with `margin: auto`, it must be a block element (`display: block`) and have a width smaller than the page. [S1]
- **Flexbox horizontal centering** — a container with `display: flex` and `justify-content: center` centers a child image horizontally. [S1]
- **Flexbox both axes** — adding `align-items: center` (plus a container `height`) centers the image both horizontally and vertically. [S1]
- **Grid centering** — `display: grid` with `place-items: center` centers the image on both axes in one declaration. [S1]
- **Coverage** — images can be centered horizontally, vertically, or both, using these modern CSS techniques. [S1]

## 🧩 추출된 패턴 (Extracted patterns)
- **Block + auto margins** — the classic horizontal-centering recipe for a fixed-width block element. [S1]
- **Container-driven centering** — flexbox (`justify-content` / `align-items`) and grid (`place-items: center`) center children without touching the image's own margins. [S1]

## 📖 세부 내용 (Details)
**Center an image with `margin: auto`**
To center an image, set `display: block` and `margin-left`/`margin-right` to `auto` (here via `margin: auto`), and give it a width smaller than the page. [S1]
```css
img {
  display: block;
  margin: auto;
  width: 50%;
}
```

**Center horizontally with flexbox**
Place the `<img>` inside a `<div>` container and use flexbox to center it horizontally. [S1]
```css
div {
  display: flex;
  justify-content: center;
}

img {
  width: 50%;
}
```

**Center horizontally and vertically with flexbox**
Add `align-items: center` and a container height to center on both axes. [S1]
```css
div {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 600px;
  border: 1px solid black;
}

img {
  width: 50%;
}
```

**Center horizontally and vertically with CSS Grid**
`place-items: center` centers the image on both axes in a single property. [S1]
```css
div {
  display: grid;
  place-items: center;
  height: 600px;
  border: 1px solid black;
}

img {
  width: 50%;
}
```

## 🛠️ 적용 사례 (Applied in summary)
The four centering examples above are the source's applied cases: block + auto margins, flex horizontal, flex both-axes, and grid both-axes. No external project/commit applications found in the source.

## 💻 코드 패턴 (Code patterns)
Classic horizontal centering (language: CSS):
```css
img {
  display: block;
  margin: auto;
  width: 50%;
}
```
Both-axes centering with grid:
```css
div {
  display: grid;
  place-items: center;
}
```

## ⚖️ 비교 및 선택 기준 (Comparison & decision criteria)
Per the source, use `display: block; margin: auto;` for simple **horizontal** centering of a single fixed-width image. Use a **flexbox** container (`justify-content: center`, optionally `align-items: center`) when you also need vertical centering or are already laying out with flex. Use **grid** with `place-items: center` for the most concise both-axes centering. Flex and grid both center the image without modifying the image's own margins, and require a container `height` for vertical centering. [S1]

## ⚖️ 모순 및 업데이트 (Contradictions & updates)
No contradictions found in the source.

## ✅ 검증 상태 및 신뢰도
- **상태:** draft
- **검증 단계:** conceptual (실제 적용 사례 발견 시 applied/validated로 승격 가능)
- **출처 신뢰도:** B (W3Schools — widely used educational reference, not a primary standards body)
- **신뢰 점수:** 0.88
- **중복 검사 결과:** 신규 생성 (New discovery)

## 🔗 지식 그래프 (Knowledge Graph)
- **상위/루트:** [[CSS Tutorial]]
- **관련 개념:** [[CSS Image Styling]], [[CSS Flexbox]], [[CSS Grid]], [[CSS Margin]]
- **참조 맥락:** Referenced whenever an image needs to be centered within its container or the page.

## 📚 출처 (Sources)
- [S1] W3Schools — CSS Image Centering — https://www.w3schools.com/css/css3_image_center.asp

## 📝 변경 이력 (Change history)
- 2026-06-23: Initial draft synthesized from the W3Schools "CSS Image Centering" page (Astra wiki-curation, P-Reinforce v3.1 format).