오늘은 CSS를 사용하여 html 요소를 세로로 가운데 정렬 하는 방법에 대해 포스팅 하려합니다.
가로 정렬방법에 비해 방법이 여러가지고 적용하려면 혼동 되는 경우가 많아 이번 기회에 정리하는 시간을
가져볼까 합니다. 그럼 하나씩 알아볼까요
1. display:table 이용
<style>
.table {
width: 400px;
height: 400px;
border: 1px solid black;
display: table;
position: relative;
}
.table_cell {
display: table-cell;
vertical-align: middle;
}
.box {
width: 100px;
height: 100px;
background-color: red;
}
</style>
<body>
<div class="table">
<div class="table_cell">
<div class="box">
</div>
</div>
</div>
</body>
가운데 정렬할 box요소의 가장 바깥쪽 table영역에 display: table, position: relative 적용 후
한단계 아래 table_cell영역에 display: table-cell, vertical-align: middle 속성을 부여하는 방법 입니다.
아래와 같이 세로로 가운데 정렬된 결과 화면을 확인 할 수 있습니다.
2. margin: auto 이용
<style>
.wrapper {
width: 400px;
height: 400px;
border: 1px solid black;
position: relative;
}
.box {
width: 100px;
height: 100px;
background-color: red;
position: absolute;
margin: auto;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
</style>
<body>
<div class="wrapper">
<div class="box">
</div>
</div>
</body>
wrapper영역을 position: relative로 지정하고 내부 box영역의 position을 absolute로 지정해 줍니다.
그리고 나서 box영역에 margin: auto 적용후 top, left, bottom, right를 모두 0으로 설정하면 아래와
같이 가로 세로 모두 가운데로 정렬된 결과를 확인 할 수 있습니다. 세로만 가운데 정렬을 원할 경우
top, bottom 값만 0으로 설정 합니다.
3. position: absolute / top, left 50% 적용 후 margin값 px조절
<style>
.wrapper {
width: 400px;
height: 400px;
border: 1px solid black;
position: relative;
}
.box {
width: 100px;
height: 100px;
background-color: red;
position: absolute;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -50px;
}
</style>
<body>
<div class="wrapper">
<div class="box">
</div>
</div>
</body>
wrapper영역을 position: relative로 지정하고 내부 box영역의 position을 absolute로 지정해 줍니다.
top과 left를 50%씩 이동시켜 가운데에 자리잡아 주고, box영역 width의 절반 height의 절반만큼
margin-top, margin-left 속성에 빼줍니다. 위 예제의 경우 width가 100px heigh가 100px 이므로
절반 값인 50px을 각각 margin-top, margin-left 속성에 빼주었습니다. 위방법의 경우 box영역의
width와 height의 길이가 명확해야 사용할 수 있는 방법 입니다.
4. position: absolute / top, left 50% 적용 후 translate값 %조절
<style>
.wrapper {
width: 400px;
height: 400px;
border: 1px solid black;
position: relative;
}
.box {
width: 100px;
height: 100px;
background-color: red;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
<body>
<div class="wrapper">
<div class="box">
</div>
</div>
</body>
3번 방법과 동일하게 wrapper영역을 position: relative로 지정하고 내부 box영역의 position을 absolute로 지정해 줍니다. top과 left를 50%씩 이동시켜 가운데에 자리잡아 주고
transform: translate(-50%, -50%) 속성을 사용하여 x값과 y값을 -50%씩 조절해 줍니다.
이 방법의 경우 box영역의 width와 height값이 px로 명확하지 않아도 적용 가능한 장점이 있습니다.
단 transform: translate() 속성 적용이 가능한 브라우저에서만 사용이 가능합니다.
5. 보이지 않는 영역에 float 속성을 주어 공간 확보 후 top값 px조절
<style>
.wrapper {
width: 400px;
height: 400px;
border: 1px solid black;
}
.float{
float:left;
height: 50%;
}
.box {
width: 100px;
height: 100px;
background-color: red;
clear: both;
position: relative;
top: -50px;
}
</style>
<body>
<div class="wrapper">
<div class="float"></div>
<div class="box">
</div>
</div>
</body>
위와 같이 box영역 위에 내용이 없는 보이지 않는 float 영역을 하나 만들어 준 후 float: left 속성으로
띄우고 height: 50%로 wrapper영역의 절반을 자리잡아 줍니다. 바로 다음에 box영역을 만들고나서 clear: both로 float해제 후 top: -50px로 box영역 높이의 절만만큼을 위로 올려 조절해 줍니다.
아래와 같은 결과 화면을 확인할 수 있습니다.
(파란 테두리 영역의 경우 float 영역을 보여주기 위해 임의로 색상을 부여하였습니다.)
오늘은 CSS를 사용하여 세로 가운데 정렬(수직 중앙 정렬) 방법에 대해서 정리해 보았습니다. 정렬 할 수 있는 새로운 방법에 대해서도 알아봐야 겠네요~ 그럼 다음에 또다른 내용으로 찾아오겠습니다. :)
'css' 카테고리의 다른 글
| CSS background-size 속성 정리 (0) | 2023.01.11 |
|---|---|
| CSS calc() 활용방법 정리 (0) | 2023.01.10 |
| CSS box-shadow 속성 사용방법 정리 (0) | 2022.12.28 |
| CSS margin 속성 사용법 정리 (0) | 2022.12.27 |
| CSS box-sizing 속성 (영역, 기준 정리) (0) | 2022.12.21 |
댓글