방법1) 웹 요소의 너비(width) 값을 안다면
요소의 width 값을 지정했다면 좌우의 마진을 auto로 지정해서 가로로 중앙에 배치할 수 있습니다. 단, 이 방법은 width 값을 기준으로 하기 때문에 가로 방향으로만 중앙 정렬합니다.
<div id="wrapper">
<div class="box"></div>
</div>
<style>
#wrapper {
width: 600px;
height: 200px;
border: 1px solid #000;
}
.box {
width: 100px;
height: 100px;
margin: 10px auto;
background: green;
}
</style>
방법 2) 요소의 너비(width) 값을 모른다면
가로로 중앙에 배치하려면 부모 요소의 50% 위치로 옮겼다가 (시작점이 50% 위치가 됨)
다시 요소 너비의 반을 왼쪽으로 이동시킵니다.
그림으로 보면 이런 형태가 되겠죠. 같은 방법으로 세로로 가운데 배치할 수 있습니다.
<div id="wrapper">
<div class="box"></div>
</div>
#wrapper {
width: 600px;
height: 200px;
position: relative; /* 부모 요소에 position: relative 포함 */
border: 1px solid #000;
}
.box {
width: 100px;
height: 100px;
background: green;
position: absolute;
left: 50%; /* 가로 시작점 50% */
top: 50%; /* 세로 시작점 50% */
transform: translate(-50%, -50%); /* 트랜스폼을 통해 가로와 세로로 50%씩 이동 */
}
방법 3) 플렉스 박스 사용하기
마진이나 left/top 를 사용한 방법은 CSS2의 오래된 속성을 활용한 방법입니다. 최근 CSS 레이아웃을 위한 새로운 방법들이 많이 등장했는데 그 중에서 플렉스 박스 레이아웃을 사용하면 웹 요소를 화면 중앙에 배치하기 쉽습니다.
플렉스 박스 레이아웃을 적용하려면 부모 요소(#wraaper)를 플렉스 컨테이너로 만들고 justify-content 속성과 align-items 속성을 사용해 가로와 세로로 중앙 정렬합니다.
<div id="wrapper">
<div class="box"></div>
</div>
부모 요소에서 모든 속성을 지정할 수도 있고
#wrapper {
width: 600px;
height: 200px;
border: 1px solid #000;
display: flex; /* 플렉스 박스 설정 */
justify-content: center; /* 가로 중앙 정렬 */
align-items: center; /* 세로 중앙 정렬 */
}
.box {
width: 100px;
height: 100px;
background: green;
}
부모 요소를 플렉스 컨테이너로 지정한 후 자식 요소에서 세로 정렬 방법을 지정할 수도 있습니다.
#wrapper {
width: 600px;
height: 200px;
border: 1px solid #000;
display: flex; /* 플렉스 박스 설정 */
justify-content: center; /* 가로 중앙 정렬 */
}
.box {
width: 100px;
height: 100px;
background: green;
align-self: center;
}
방법 4) CSS Grid 레이아웃 사용하기
CSS3에 와서 새로 등장한 레이아웃 방법 중 하나가 CSS Grid 레이아웃입니다. 이 방법을 사용하려면 부모 요소(#wrapper)에 Grid 관련 속성을 추가하고 justify-content와 align-items 속성을 center로 지정합니다. CSS Grid 레이아웃에서는 justify-content와 align-items 속성을 줄여서 place-items 라고 작성할 수 있습니다.
<div id="wrapper">
<div class="box"></div>
</div>
#wrapper {
width: 600px;
height: 200px;
border: 1px solid #000;
display: grid; /* 그리드 컨테이너 설정 */
/* justify-content: center;
align-items: center; */
place-items: center; /* 단축 속성 */
}
.box {
width: 100px;
height: 100px;
background: green;
}
CSS 그리드 역시 부모 요소에서 그리드 컨테이너로 지정한 후, 자식 요소에서 정렬 방법을 지정해도 됩니다.
#wrapper {
width: 600px;
height: 200px;
border: 1px solid #000;
display: grid; /* 그리드 컨테이너 설정 */
}
.box {
width: 100px;
height: 100px;
background: green;
align-self: center;
justify-self: center;
}
'css' 카테고리의 다른 글
object-fit 속성 (0) | 2024.02.24 |
---|---|
CSS 함수란 (0) | 2024.02.24 |
계산식을 사용하는 CSS 함수 - min(), max(), clamp() (0) | 2023.02.22 |
계산식을 사용하는 CSS 함수 - calc() (0) | 2023.02.22 |
좌우로 왔다갔다 하는 CSS 애니메이션 (0) | 2023.02.15 |