CSS에서 text-align: center와 margin: 0 auto

CSS에서 text-align: center와 margin: 0 auto는 모두 중앙 정렬과 관련이 있지만, 적용되는 대상과 방식이 완전히 다릅니다.

text-align: center

적용 대상: 인라인 요소와 인라인 블록 요소

• 텍스트
• 이미지 (기본적으로 인라인 요소)
• display: inline-block 요소
• display: inline 요소

동작 방식: 부모 컨테이너 내에서 콘텐츠를 수평 중앙 정렬합니다.

.parent {
    text-align: center;
}
/* 이 경우 .parent 안의 텍스트, 이미지, 인라인 요소들이 중앙 정렬됩니다 */

margin: 0 auto

적용 대상: 블록 레벨 요소

• div, p, section 등의 블록 요소
• 고정된 너비(width)를 가진 요소

동작 방식: 요소 자체를 부모 컨테이너 내에서 수평 중앙 정렬합니다.

.element {
    width: 300px;  /* 너비가 반드시 지정되어야 함 */
    margin: 0 auto;
}
/* 이 경우 .element 자체가 중앙에 위치합니다 */

주요 차이점

1. 적용 대상의 차이

/* text-align: center - 내부 콘텐츠 정렬 */
.container {
    text-align: center;
}

/* margin: 0 auto - 요소 자체 정렬 */
.box {
    width: 200px;
    margin: 0 auto;
}

2. 너비 요구사항

• text-align: center: 너비 지정 불필요
• margin: 0 auto: 반드시 고정 너비 필요 (width, max-width 등)

3. 상속 여부

• text-align: center: 상속됨 - 자식 요소들도 영향받음
• margin: 0 auto: 상속되지 않음 - 해당 요소에만 적용

4. 블록 vs 인라인 처리

/* 블록 요소를 중앙 정렬하고 싶다면 */
.block-element {
    width: 50%;
    margin: 0 auto;  /* 올바른 방법 */
}

.parent {
    text-align: center;  /* 블록 요소에는 효과 없음 */
}

/* 인라인 요소를 중앙 정렬하고 싶다면 */
.parent {
    text-align: center;  /* 올바른 방법 */
}

.inline-element {
    margin: 0 auto;  /* 인라인 요소에는 효과 없음 */
}

실제 사용 예시

/* 텍스트와 이미지 중앙 정렬 */
.text-container {
    text-align: center;
}

/* 고정 너비 박스 중앙 정렬 */
.content-box {
    width: 600px;
    margin: 0 auto;
    background: #f0f0f0;
}

/* 두 방법을 함께 사용하는 경우 */
.wrapper {
    width: 800px;
    margin: 0 auto;      /* 래퍼 자체를 중앙 정렬 */
    text-align: center;  /* 래퍼 내부 콘텐츠도 중앙 정렬 */
}

요약하면, text-align: center는 내부 콘텐츠를 정렬하고, margin: 0 auto는 요소 자체를 정렬하는 완전히 다른 개념입니다.

In CSS beziehen sich Text-Align: Mitte und Rand: 0 Auto beide mit der zentralen Ausrichtung, aber die angewandten Probanden und Methoden sind völlig unterschiedlich.