HTML 요소를 가로 및 세로로 정렬하는 5가지 방법

HTML/CSS로 작업하는 사람은 조만간 요소의 수직 및 수평 정렬 문제에 직면하게 됩니다. 다시는 인터넷 검색을 하지 않고 다양한 옵션을 찾을 수 있도록 여기에서 가장 인기 있는 몇 가지를 수집했습니다.

방법 1

supported browsers,에서 top: 50%/left: 50%를 translateX(-50%) translateY(-50%)와 함께 사용하여 요소를 수평/수직으로 동적으로 중앙에 배치할 수 있습니다.

.container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
}

예시는 here, here은 전체화면으로 볼 수 있습니다.

방법 2

supported browsers 에서 속성을 display 값flex으로 설정하고 수직 및 수평 센터링에 각각 align-items: centerjustify-content: center를 사용할 수도 있습니다. 가장 중요한 것은 이 트릭이 더 많은 브라우저에서 작동하도록 공급업체 접두사를 추가하는 것을 잊지 마십시오( example ).

html, body, .container {
    height: 100%;
}
.container {
    display: flex;
    align-items: center;
    justify-content: center;
}

다음은 an example 및 full screen version 입니다.

방법 3

어떤 경우에는 html/요소body의 높이가 100%인지 확인해야 합니다.

수직 정렬 속성width 및 height를 설정하려면 상위 값100%을 설정하고 display: table 를 추가합니다. 자식에서 display 값을 table-cell 로 변경하고 vertical-align: middle 를 추가합니다.

텍스트 및 기타 인라인 요소의 수평 정렬의 경우 text-align: center 또는 블록 요소를 처리하는 경우 margin: 0 auto를 사용할 수 있습니다. 이것은 most browsers에서 작동해야 합니다.

html, body {
    height: 100%;
}
.parent {
    width: 100%;
    height: 100%;
    display: table;
    text-align: center;
}
.parent > .child {
    display: table-cell;
    vertical-align: middle;
}

예를 사용할 수 있습니다here 및 here .

방법 4

이것은 텍스트의 높이를 미리 알고 있다고 가정합니다. 이 경우 예를 들어 18px . 이제 요소의 속성position에 absolute 값을 할당하고 상위 요소를 기준으로 위에서50% 이동하면 됩니다. 마지막으로 속성margin-top은 요소 높이의 절반과 같은 음수 값으로 설정해야 합니다.

html, body, .container {
    height: 100%;
}
.container {
    position: relative;
    text-align: center;
}
.container > p {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    margin-top: -9px;
}

예를 들어 here 및 here . 이 옵션은 지원되는 모든 브라우저에서 작동해야 합니다.

방법 5

어떤 경우에는 부모 요소의 높이가 고정되어 있습니다. 수직 정렬의 경우 line-height 자식 속성을 부모의 높이로 설정하기만 하면 됩니다. 어떤 경우에는 이것이 작동하지만 몇 줄의 텍스트가 ruin everything 다음과 같으므로 이 방법을 사용해서는 안 됩니다.

.parent {
    height: 200px;
    width: 400px;
    text-align: center;
}
.parent > .child {
    line-height: 200px;
}

예를 볼 수 있습니다here.