집 > 기사 > 웹 프론트엔드 > 가변 너비와 높이로 수직 및 수평 센터링을 달성하는 CSS 9가지 방법(건조 정보)

가변 너비와 높이로 수직 및 수평 센터링을 달성하는 CSS 9가지 방법(건조 정보)

Guanhui앞으로: 2020-05-08 09:41:403944검색

일반적인 flex, Transform, Absolute 등이 있습니다. CSS3 그리드 레이아웃도 있습니다. 의사 요소 메서드도 있습니다. 예, 읽으셨습니다. ::after 및 ::before도 센터링을 달성할 수 있습니다.

1. Flex

누구나 첫 반응은 Flex일 수 있습니다. 작성 방법이 충분히 간단하고 직관적이며, 호환성에도 문제가 없기 때문입니다. 휴대폰을 중심으로 한 첫 번째 선택입니다.

<div class="wrapper flex-center">
    <p>horizontal and vertical</p>
</div>

.wrapper {
    width: 300px;
    height: 300px;
    border: 1px solid #ccc;
}
.flex-center {
    display: flex;
    justify-content: center;
    align-items: center;
}

2가지 핵심 속성인 justify-content와 align-items를 사용하며 둘 다 중앙 정렬을 위해 중앙으로 설정됩니다.

유일한 하위 요소를 중앙에 배치하려면 여기서 flex-center를 상위 요소에 걸어야 한다는 점에 유의해야 합니다.

2.flex + margin

이것은 flex 방식의 변형입니다. 상위 요소는 flex로 설정되고 하위 요소는 margin:auto;로 설정됩니다. 하위 요소는 주변 여백에 의해 가운데로 "압착"된다는 것을 이해할 수 있습니다.

<div class="wrapper">
    <p>horizontal and vertical</p>
</div>

.wrapper {
    width: 300px;
    height: 300px;
    border: 1px solid #ccc;
    display: flex;
}
.wrapper > p {
    margin: auto;
}

3. 변형 + 절대

이 조합은 이미지를 중앙에 배치하는 데 자주 사용됩니다.

<div class="wrapper">
    <img src="test.png">
</div>

.wrapper {
    width: 300px;
    height: 300px;
    border: 1px solid #ccc;
    position: relative;
}
.wrapper > img {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

물론, 상위 요소 래퍼의 상대 위치를 하위 요소 img로 이동하여 절대 위치를 대체할 수도 있습니다. 효과는 동일합니다.

4. table-cell

테이블의 셀 센터링 효과를 활용하여 표시하세요. flex와 마찬가지로 상위 요소에 작성해야 합니다.

<div class="wrapper">
    <p>horizontal and vertical</p>
</div>

.wrapper {
    width: 300px;
    height: 300px;
    border: 1px solid #ccc;
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}

5. Absolute + 네 방향의 값이 동일합니다

절대 위치 레이아웃을 사용하고 margin:auto;를 설정하고 위쪽, 왼쪽, 오른쪽, 아래쪽 값을 동일하게 설정합니다. (반드시 모두 0일 필요는 없습니다).

<div class="wrapper">
    <p>horizontal and vertical</p>
</div>

.wrapper {
    width: 300px;
    height: 300px;
    border: 1px solid #ccc;
    position: relative;
}
.wrapper > p {
    width: 170px;
    height: 20px;
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

이 방법은 일반적으로 팝업 레이어에 사용되며, 팝업 레이어의 너비와 높이를 설정해야 합니다.

6. 쓰기 모드

이 방법은 텍스트 표시 방향을 세로 방향으로 변경하는 등 텍스트 표시 방향을 변경할 수 있습니다.

<div class="wrapper">
    <div class="wrapper-inner">
        <p>horizontal and vertical</p>
    </div>
</div>

.wrapper {
    width: 300px;
    height: 300px;
    border: 1px solid #ccc;
    writing-mode: vertical-lr;
    text-align: center;
}
.wrapper > .wrapper-inner {
    writing-mode: horizontal-tb;
    display: inline-block;
    text-align: center;
    width: 100%;
}
.wrapper > .wrapper-inner > p {
    display: inline-block;
    margin: auto;
    text-align: left;
}

아직 호환성에 사소한 결함이 있지만 휴대폰을 포함한 대부분의 브라우저는 이미 쓰기 모드 쓰기를 지원하고 있습니다.

7. 그리드

테이블과 마찬가지로 그리드 레이아웃을 사용하면 요소를 행이나 열별로 정렬할 수 있습니다. 그러나 레이아웃 측면에서 그리드는 테이블보다 더 가능하거나 간단합니다.

<div class="wrapper">
    <p>horizontal and vertical</p>
</div>

.wrapper {
    width: 300px;
    height: 300px;
    border: 1px solid #ccc;
    display: grid;
}
.wrapper > p {
    align-self: center;
    justify-self: center;
}

하지만 호환성 측면에서는 flex만큼 좋지 않습니다. 특히 IE10 이상만 지원하는 IE 브라우저에서는 더욱 그렇습니다.

8. ::after

의사 요소를 사용하여 센터링을 구현할 수도 있나요? 정말 마법 같은 느낌이 듭니다. 아래 예를 보세요.

<div class="wrapper">
    <img src="test.png">
</div>

.wrapper {
    width: 300px;
    height: 300px;
    border: 1px solid #ccc;
    text-align: center;
}
.wrapper::after {
    content: &#39;&#39;;
    display: inline-block;
    vertical-align: middle;
    height: 100%;
}
.wrapper > img {
    vertical-align: middle;
}

가로 방향은 이해하기 쉽습니다. 세로 방향에서는 img를 가운데로 끌어내린 후 ::로 이해하면 됩니다.

9. ::before

다른 하나는 글꼴 크기: 0;과 함께 작동하는 마법입니다.

<div class="wrapper">
    <img src="test.png">
</div>

.wrapper {
    width: 300px;
    height: 300px;
    border: 1px solid #ccc;
    text-align: center;
    font-size: 0;
}
.wrapper::before {
    display: inline-block;
    vertical-align: middle;
    font-size: 14px;
    content: &#39;&#39;;
    height: 100%;
}
.wrapper > img {
    vertical-align: middle;
    font-size: 14px;
}

font-size: 0;의 비밀은 라벨 사이의 간격을 없애는 것입니다. 또한 의사 요소는 가장 기본적인 CSS 작성 방법과 일치하므로 호환성에 대한 위험이 없습니다.

가변 너비와 높이로 수직 및 수평 센터링을 달성하는 CSS 9가지 방법(건조 정보)

관련 기사