반응형
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 |
