[Web/CSS] 모바일 CSS 수직 중앙 정렬하기

PC 버전

모바일 웹은 상단바와 하단 네비게이션 바로 인해 100vh가 화면 전체를 의미하지 않습니다.

때문에 PC에서처럼 vh로 세로 가운데로 정렬할 수 없습니다.

이럴 때 사용자 정의 스타일로 문제를 해결할 수 있습니다.

모바일 수직 중앙 정렬 방법에 대해 포스팅하겠습니다.

 

JavaScript : 새롭게 "--vh" 스타일을 정의

function setScreenSize() {
    //먼저 뷰포트의 실제 높이를 100등분하여, 새로 정의할 1 vh의 값을 얻습니다.
    let vh = window.innerHeight * 0.01;
    //--vh를 키워드로 삼아서 활용합니다.
    document.documentElement.style.setProperty('--vh', `${vh}px`);
}
setScreenSize();

//vh가 변할 때마다 1vh의 길이를 갱신합니다.
window.addEventListener('resize', setScreenSize);

 

HTML : 컨테이너 만들기

<center>
<div class="box">
    <div class="content">내부 컨텐츠</div>
</div>
</center>
</body>

 

CSS : 테스트용 스타일

.box {
    position: relative;
    /*저는 곱하기 50을 했지만 원하는 대로 바꾸면 됩니다*/
    top: calc(var(--vh, 1vh) * 50);
    transform: translateY(-50%);
    width: 50%;
    max-height: 50vh;
    max-width: 50vh;
    background-color: skyblue;
}

.box::after {
    display: block;
    content: "";
    padding-bottom: 100%;
}

.content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

 

아이폰 사파리

 

아이폰 크롬

 

안드로이드 크롬