CSS로 이미지 정가운데 보여주기

Posted on by 솔천

이번시간에는 오직 CSS만 이용해서 하나의 이미지를 화면의 정가운데 보여주는데, 윈도우의 사이즈를 바꿀때마다 자동으로 줄어들었다 커졌다 하면서, 가로든 세로든 이미지가 잘리지 않고 전체가 보이도록 가로나 세로중 더 작은 쪽은 기준으로 이미지 사이즈를 결정하여 정 가운데 위치하도록 하는 CSS팁을 알려드리도록 하겠습니다.

<html>
<head>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .imgbox {
            display: grid;
            height: 100%;
        }
        .center-fit {
            max-width: 100%;
            max-height: 100vh;
            margin: auto;
        }
    </style>
</head>
<body>
<div class="imgbox">
    <img class="center-fit" src="logo.png" />
</div>
</body>
</html>

위의 코드를 테스트해보면 아래와 같이 가로든 세로든 화면을 어떻게 변경해도 로고가 절대 짤리지 않고 크기가 조정되면서 언제나 정가운데 위치합니다.

화면을 아주 크게 키워도,

화면을 아주 작게 줄여도,

화면을 가로로 길게 늘여도,

화면을 세로로 길게 늘여도,

이미지는 언제나 정가운데 짤림없이 보여집니다.

Archived: CSS