빔캠프 당신은..
나근 나근한 목소리로 급하지 않게 설명해 주시는 빔캠프님의 유튜브 라이브에서
다양한 block의 중앙정렬 방법을 알려주셨다.
매번 중앙 정렬하면 margin: 0 auto;나 text-align: center;, flex, grid만 사용할 줄 알았지 다른 방법은 필요 없을 줄 알았다.
거기다가 자주 쓰던 flex를 내가 생각하지 못하는 방법으로 중앙 정렬 시킬 수 있었다.
예제에 사용했던 html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CONF</title>
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<div class="app">
APP
</div>
</body>
</html>본격 .app을 중앙으로 옮겨라! 가 시작된다.
position absolute 이용한 방법
.app {
box-shadow: inset 0 0 20px red;
width: 850px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}위 방법은 position을 absolute로 바꾸어 left와 top을 50%를 주고, translate(-50%, -50%)를 주어 중앙정렬이 가능하게 만들었다.
또 다른 방법
.app {
box-shadow: inset 0 0 20px red;
position: absolute;
inset: 0;
width: 640px;
height: 480px;
margin: auto;
}블록 레벨에서는 한 라인만 자신의 영역이기 때문에 마진 좌우만 auto가 먹히지만 inset:0 (left, right, top, bottom)이면 모든 화면의 영역이 자신의 영역이 되므로 마진 상하 좌우 auto가 먹을 수 있다.
flex를 이용한 방법
최근에는 보통 flex나 grid를 많이 사용하는 것으로 알고있기에 크게 신경안쓰고 있었는데 내가 생각하지 못한 방법을 소개해 주셨다.
보통 내가 쓰는 flex 방법
body{
display: flex;
height: 100vh;
justify-content: center;
aligin-item: center
}
.app{
box-shadow: inset 0 0 20px red;
width: 600px;
height: 400px;
}
위에 소개한 3가지 방법 모두 중앙 정렬이 가능하지만 브라우저의 크기가 컨텐츠보다 작아지면 위아래 모두 화면 밖으로 나가는 문제가 있다.
이를 보완해줄 방법이다.
body{
display: flex;
height: 100vh;
}
.app{
box-shadow: inset 0 0 20px red;
width: 600px;
height: 400px;
margin: auto auto;
}그렇다. justify-content: center와 aligin-item: center 를 지우고 부모의 height를 100vh를 줘서 .app에 margin: auto auto;를 사용하여 중앙정렬을 할 수 있다.
화면이 작아졌을때 margin이 0이 되고 .app 상단 오른쪽끝에 붙어 상단 컨텐츠가 잘리는 상황이 없어진다. 그리고 스크롤을 만들어 하단으로 스크롤 할 수 있게 처리할 수 있다.!
정말 좋은 정보를 얻은거 같다.
이번주 주말은 성공한 주말인듯 하다. 😃
