Files

T

Antigravity Agent 1cfd3bbb56 docs(10_Wiki): 위키 구조 정리 — 언어 튜토리얼 카테고리 폴더 제거 + 신규 자산 동기화

Topic_CSS/Topic_HTML/Topic_JavaScript/Topic_Prompt/Topic_Comfyui 등 기존 카테고리 폴더를 정리하고,
Topic_Graphic/Dev 등 신규 산출물과 Topics 내부 세션/메모리 기록을 동기화.

2026-07-05 00:10:59 +09:00

3.6 KiB

Raw Blame History

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

title

HOWTO CSS Center Button

🎯 한 줄 통찰 (One-line insight)

This recipe is the EXACT SAME three techniques as [[HOWTO CSS Center Vertical]] (absolute+translateY, absolute+translate both axes, flexbox), just applied to a <button> element instead of generic text — confirming that these centering methods are element-agnostic: they operate purely on the CONTAINER's positioning/layout, completely indifferent to what kind of child element (text, button, image, or anything else) is being centered. [S1]

🧠 핵심 개념 (Core concepts)

Element-agnostic centering — the same position: absolute + transform or display: flex techniques from the general vertical-centering recipe apply unchanged to a button. [S1]
Vertical-only: .vertical-center { position: absolute; top: 50%; transform: translateY(-50%); }. [S1]
Both axes (absolute): .center { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }. [S1]
Both axes (flexbox): .center { display: flex; justify-content: center; align-items: center; }. [S1]

📖 세부 내용 (Details)

Same container/technique structure as the general centering recipe, with <button>Centered Button</button> as the child instead of a <p>. [S1]

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

일반 중앙 정렬 레시피와 완전히 동일한 기법: [[HOWTO CSS Center Vertical]]에서 사용된 세 가지 기법(absolute+translateY, absolute+translate 양축, flexbox)이 대상 요소만 텍스트에서 버튼으로 바뀐 채 그대로 재사용된다는 점이 확인됨 — 중앙 정렬 기법이 자식 요소의 종류와 무관하게 동작함을 보여줌. [S1]

🛠️ 적용 사례 (Applied in summary)

"Centered Button"이라는 버튼을 컨테이너 안에서 세로만, 또는 세로+가로 모두 중앙 정렬하는 예제가 원문에서 제시됨. [S1]

💻 코드 패턴 (Code patterns)

Centering a button — identical technique to centering any element (CSS):

.container { height: 200px; position: relative; }
.center {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
}

<div class="container">
  <div class="center"><button>Centered Button</button></div>
</div>

✅ 검증 상태 및 신뢰도

상태: draft
검증 단계: conceptual
출처 신뢰도: B (W3Schools — widely used educational reference)
신뢰 점수: 0.80
중복 검사 결과: HOWTO CSS Center Vertical과 기법 중복 확인 — 별도 문서로 유지(대상 요소가 다른 별개 레시피 페이지).

🔗 지식 그래프 (Knowledge Graph)

상위/루트: W3Schools HOW TO
관련 개념: HOWTO CSS Center Vertical, HOWTO CSS Center Website
참조 맥락: CSS Layout & Positioning 섹션.

📚 출처 (Sources)

[S1] W3Schools — How To - Center a Button in DIV — https://www.w3schools.com/howto/howto_css_center_button.asp

📝 변경 이력 (Change history)

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

3.6 KiB Raw Blame History