CSS - position:absolute 가운데, 중앙 정렬하기

position값을 사용하여 처리하면 center같은 옵션이 먹지 않는데, 이런 경우에는 약간의 연산이나 transform옵션을 활용하면 중앙 정렬 또는 가운데 정렬등을 처리 할 수 있습니다.

transform을 통한 센터정렬, 중앙정렬하기

HTML - 예시 데이터

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Centered</title>
</head>
<style>
    * {
        margin: 0px;
        padding: 0px;
    }

    .popup {
        width: 300px;
        height: 450px;
        border: 1px solid gray;
        background-color: aquamarine;
        position: absolute;
        top: 0%;
        left: 0%;
    }
</style>

<body>
    <div class="popup"></div>
</body>

</html>

이러한 형태의 div를 중앙 정렬을 또는 가운데 정렬을 처리해보겠습니다.

1. top, left에 50%씩 처리하여 가운데로 밀어넣기

.popup 클래스에 top, left를 50퍼로 수정합니다.

.popup {
    width: 300px;
    height: 450px;
    border: 1px solid gray;
    background-color: aquamarine;
    position: absolute;
    top: 50%;
    left: 50%;
}

중앙을 기준으로 가로 300px, 높이 450px짜리 div가 처리된것을 볼 수 있습니다.

이부분에서 transform을 추가하여 완벽한 중앙 정렬을 처리합니다.

2. transform으로 요소 사이즈만큼 반대로 이동시키기

.popup {
    width: 300px;
    height: 450px;
    border: 1px solid gray;
    background-color: aquamarine;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

원리는 아래와 같습니다.

개체의 넓이와 높이만큼 50퍼센트를 반대로 이동합니다.

가운데 정렬

높이는 30px만큼 고정으로 띄우고 가운데만 정렬하고자 할때는 아래와 같이합니다.

.popup {
    width: 300px;
    height: 450px;
    border: 1px solid gray;
    background-color: aquamarine;
    position: absolute;
    top: 30px;
    left: 50%;
    transform: translate(-50%, 0%);
}

translate의 첫번째 x축인 가로축만 50퍼센트만큼 당겨와서 가운데 정렬을 처리할 수 있습니다.

저작자표시 비영리 변경금지

'WEB > HTML,CSS' 카테고리의 다른 글

HTML - Table td안에 특수문자(")가 존재할 경우 넓이 초과 현상 (0)	2020.11.26
CSS - p태그 등 너무 긴 문자열이 존재할 때, 넓이에 따른 자동 줄바꿈 (2)	2020.09.09
CSS - checkbox를 이미지로 꾸미고 동작시키기(label, CSS Trick) (2)	2020.05.25
HTML - input 속성 태그 모바일 환경에서 숫자패드 먼저 나오게 하기 (0)	2019.09.06
HTML - Form 태그, Input 태그 자동완성 해제하기 (0)	2019.09.06

개발 흔적 남기기