코드랩 레퍼런스
컨텐츠 요소를 가운데 오게 하는 방법 본문
반응형 사이트를 만들 때 제일 많이 쓰는 기법이 컨텐츠 요소를 정 가운데 오게 하는 방법입니다. 이 방법에는 여러가지 방법이 있으며 각각의 장단점이 있습니다. 컨텐츠 요소를 가운데 오게 하는 방법에 대해서 정리해보겠습니다.
1. 인라인구조 가운데 정렬 : 가장 기본적인 방법이지만 이 방법은 한 줄(요소)일 경우에서만 해당이 됩니다.
- 부모요소(인라인구조) : text-align : center; line-height: (height값과 동일하게)
2. 블록구조 가운데 정렬 : 가장 기본적인 방법이지만 이 방법은 한 줄(요소)일 경우에서만 해당이 됩니다.
- 요소(블록구조) : margin:0 auto; width값 설정, line-height: (height값과 동일하게)
3. 요소의 성질을 table로 변환시켜서 가운데 정렬을 하는 방법이지만 table자체를 레이아웃에 많이 사용하지 않기 때문에 잘 쓰지 않는 방법입니다.
- 부모요소 : display:table;
- 자식요소 : display:table-cell, text-align:center; vertical-align:middle;
4. 절대 요소를 이용한 가운데 정렬방법이며, 제일 흔하게 쓰이지만 단점은 영역이 없어지는 것이 단점이어서 반응형을 할 때 사용하기 불편한 점이 있습니다.
- 부모요소 : position:relative;
- 자식요소 : position:absolute; top:50%; left: 50%; margin-top:-(자식 요소 높이값의 반); margin-left:-(자식 요소 가로값의 반);
5. 만약 자식요소의 가로값과 세로 값을 모르고 유동적인 경우에 절대 요소를 사용하여 가운데로 오는 정렬방법입니다.
- 부모요소 : position:relative;
- 자식요소 : position:absolute; top:50%; left: 50%; transform:translate(-50%, -50%);
6. 절대 요소를 이용한 가운데 정렬 방법이지만 흔하게 쓰이지는 않습니다.
- 부모요소 : position:relative;
- 자식요소 : position:absolute; top:0; left:0; top:0; right:0; margin: auto;
7. CSS3를 이용한 방법이지만 최신 브라우저 이외에서는 작동하지 않는 단점이 있지만 표준화 된다면 앞으로 많이 쓰일 방법입니다.
- 부모요소 : height 값 설정
- 자식요소 : display: flex; justify-content: center; align-items: center;
- 부모요소(인라인구조) : text-align : center; line-height: (height값과 동일하게)
2. 블록구조 가운데 정렬 : 가장 기본적인 방법이지만 이 방법은 한 줄(요소)일 경우에서만 해당이 됩니다.
- 요소(블록구조) : margin:0 auto; width값 설정, line-height: (height값과 동일하게)
3. 요소의 성질을 table로 변환시켜서 가운데 정렬을 하는 방법이지만 table자체를 레이아웃에 많이 사용하지 않기 때문에 잘 쓰지 않는 방법입니다.
- 부모요소 : display:table;
- 자식요소 : display:table-cell, text-align:center; vertical-align:middle;
4. 절대 요소를 이용한 가운데 정렬방법이며, 제일 흔하게 쓰이지만 단점은 영역이 없어지는 것이 단점이어서 반응형을 할 때 사용하기 불편한 점이 있습니다.
- 부모요소 : position:relative;
- 자식요소 : position:absolute; top:50%; left: 50%; margin-top:-(자식 요소 높이값의 반); margin-left:-(자식 요소 가로값의 반);
5. 만약 자식요소의 가로값과 세로 값을 모르고 유동적인 경우에 절대 요소를 사용하여 가운데로 오는 정렬방법입니다.
- 부모요소 : position:relative;
- 자식요소 : position:absolute; top:50%; left: 50%; transform:translate(-50%, -50%);
6. 절대 요소를 이용한 가운데 정렬 방법이지만 흔하게 쓰이지는 않습니다.
- 부모요소 : position:relative;
- 자식요소 : position:absolute; top:0; left:0; top:0; right:0; margin: auto;
7. CSS3를 이용한 방법이지만 최신 브라우저 이외에서는 작동하지 않는 단점이 있지만 표준화 된다면 앞으로 많이 쓰일 방법입니다.
- 부모요소 : height 값 설정
- 자식요소 : display: flex; justify-content: center; align-items: center;
인라인구조 가운데 정렬
See the Pen center1 by Webstoryboy (@webstoryboy) on CodePen.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>컨텐츠를 가운데 오게 하는 방법</title>
<style>
.center {
background-color:#f06292;
text-align: center;
height: 100vh;
line-height: 100vh;
}
.center span {
width: 100px; height: 100px;
background-color: #fff;
border-radius: 50%;
text-align: center;
line-height: 100px;
display: inline-block;
box-shadow: 0 2px 5px rgba(0,0,0,0.26);
color: rgba(0,0,0,0.7);
}
</style>
</head>
<body>
<div class="center">
<span>Center</span>
</div>
</body>
</html>
블록구조 가운데 정렬
See the Pen center2 by Webstoryboy (@webstoryboy) on CodePen.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>컨텐츠를 가운데 오게 하는 방법</title>
<style>
* {padding: 0; margin: 0;}
body {background-color:#ff7043;}
.center {
width: 100px;
height: 100vh;
line-height: 100vh;
margin: 0 auto;
}
.center span {
width: 100px;
height: 100px;
display: inline-block;
background-color: #fff;
border-radius: 50%;
text-align: center;
line-height: 100px;
box-shadow: 0 2px 5px rgba(0,0,0,0.26);
color: rgba(0,0,0,0.7);
}
</style>
</head>
<body>
<div class="center">
<span>Center</span>
</div>
</body>
</html>
테이블 스타일 가운데 정렬
See the Pen center3 by Webstoryboy (@webstoryboy) on CodePen.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>컨텐츠를 가운데 오게 하는 방법</title>
<style>
* {padding: 0; margin: 0;}
body {background-color:#ff9800;}
.center {
display: table;
width: 100%; height: 100vh;
}
.center span {
display: table-cell;
text-align: center;
vertical-align: middle;
}
.center span em {
display: inline-block;
width: 100px; height: 100px;
line-height: 100px;
border-radius: 50%;
background-color: #fff;
box-shadow: 0 2px 5px rgba(0,0,0,0.26);
color: rgba(0,0,0,0.7);
}
</style>
</head>
<body>
<div class="center">
<span><em>Center</em></span>
</div>
</body>
</html>
포지션 값을 이용한 정렬 : margin을 사용한 경우
See the Pen center4 by Webstoryboy (@webstoryboy) on CodePen.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>컨텐츠를 가운데 오게 하는 방법</title>
<style>
* {padding: 0; margin: 0;}
body {background-color:#7cb342;}
.center {
position: relative;
height: 100vh;
}
.center span {
position: absolute;
left: 50%; top:50%;
margin-left: -50px;
margin-top: -50px;
text-align: center;;
display: inline-block;
width: 100px; height: 100px;
line-height: 100px;
border-radius: 50%;
background-color: #fff;
box-shadow: 0 2px 5px rgba(0,0,0,0.26);
color: rgba(0,0,0,0.7);
}
</style>
</head>
<body>
<div class="center">
<span>Center</span>
</div>
</body>
</html>
포지션 값을 이용한 정렬 : transform을 사용한 경우
See the Pen center5 by Webstoryboy (@webstoryboy) on CodePen.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>컨텐츠를 가운데 오게 하는 방법</title>
<style>
* {padding: 0; margin: 0;}
body {background-color:#0288d1;}
.center {
position: relative;
height: 100vh;
}
.center span {
position: absolute;
left: 50%; top:50%;
transform: translate(-50%,-50%);
text-align: center;;
display: inline-block;
width: 100px; height: 100px;
line-height: 100px;
border-radius: 50%;
background-color: #fff;
box-shadow: 0 2px 5px rgba(0,0,0,0.26);
color: rgba(0,0,0,0.7);
}
</style>
</head>
<body>
<div class="center">
<span>Center</span>
</div>
</body>
</html>
포지션 값을 이용한 정렬 : margin: auto을 사용한 경우
See the Pen center6 by Webstoryboy (@webstoryboy) on CodePen.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>컨텐츠를 가운데 오게 하는 방법</title>
<style>
* {padding: 0; margin: 0;}
body {background-color:#00796b;}
.center {
position: relative;
height: 100vh;
}
.center span {
position: absolute;
left: 0; top: 0; right:0; bottom:0;
margin: auto;
text-align: center;;
display: inline-block;
width: 100px; height: 100px;
line-height: 100px;
border-radius: 50%;
background-color: #fff;
box-shadow: 0 2px 5px rgba(0,0,0,0.26);
color: rgba(0,0,0,0.7);
}
</style>
</head>
<body>
<div class="center">
<span>Center</span>
</div>
</body>
</html>
display:flex를 사용하는 경우
See the Pen center7 by Webstoryboy (@webstoryboy) on CodePen.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>컨텐츠를 가운데 오게 하는 방법</title>
<style>
* {padding: 0; margin: 0;}
body {background-color:#5e35b1;}
.center {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.center span {
text-align: center;;
display: inline-block;
width: 100px; height: 100px;
line-height: 100px;
border-radius: 50%;
background-color: #fff;
box-shadow: 0 2px 5px rgba(0,0,0,0.26);
color: rgba(0,0,0,0.7);
}
</style>
</head>
<body>
<div class="center">
<span>Center</span>
</div>
</body>
</html>
Share
Ad
Comments