css

CSS 중앙정렬 가이드

CSS logo

CSS 중앙정렬 가이드

수평정렬, 수직정렬에 대해 찾아보다가 잘 설명된 페이지)가 있어 포스팅
예제 코드는 정확히 필요한 부분만 가져왔기 때문에 폰트,배경 색 같은 코드는 빠져있음

수평정렬 ( horizontally )

1. inline 요소를 수평 중앙정렬 시

부모 요소에 text-align: center 적용

1
2
3
4
5
6
7
8
9
10
11
12
13
<!-- HTML -->
<nav>
<a href="#">One</a>
<a href="#">Two</a>
<a href="#">Two</a>
</nav>

<!-- CSS -->
<style>
nav {
text-align: center;
}
</style>

one line / inline / horizontally

부모 요소인 nav 태그에 text-algin: center를 적용하면
인라인 태그이면서 자식 태그인 a 태그들은 중앙정렬이 된다.

2. block 요소를 수평 중앙정렬 시

block 요소가 한개일 때, 두개 이상일 때를 나누어 알아보자.

2-1. 1개의 block 요소를 수평 중앙정렬 할 때

block 요소는 width 속성을 따로 설정하지 않으면
자동으로 width: auto가 적용되므로 width 설정 후 margin: 0 auto 설정

1
2
3
4
5
6
7
8
9
10
11
12
<!-- HTML -->
<div class="center">
I'm a block level element and am centered
</div>

<!-- CSS -->
<style>
.center {
width: 200px;
margin: 0 auto;
}
</style>

one line / block / horizontally

여기서 margin: 0 auto는 위아래 마진은 0 좌우는 남는 여백의 반반씩 가져간다는 뜻

2-2. 2개 이상의 block 요소를 수평 중앙정렬 할 때

부모요소에 text-align: center, 자식 요소의 각각에 display: inline-block을 적용해주면 된다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!-- HTML -->
<main class="inline-block-center">
<div> I'm an element that is block-like with my siblings and we're centered in a row. </div>
<div> I'm an element that is block-like with my siblings and we're centered in a row. I have more content in me than my siblings do. </div>
<div> I'm an element that is block-like with my siblings and we're centered in a row.
</div>
</main>

<!-- CSS -->
<style>
.inline-block-center {
text-align: center;
}
.inline-block-center div {
display: inline-block;
width: 200px;
text-align: left;
}
</style>

multi lines / inline / horizontally

display: inline-block을 사용할 때는 width 또는 max-width 값을 설정해줘야 퍼지지 않고 레이아웃이 잡힘.
위의 코드와 같이 작성하면 이미지의 위쪽과 같이 높이가 제각각인 블럭이 만들어지는데
이를 해결하기 위해서는 height, vertical-align: top을 주면
이미지의 아래와 같이 일정한 모양을 잡을 수 있다.

수직정렬 ( vertically )

1. inline 요소를 수직 중앙정렬 할 때

1-1. 한 줄일 경우

disaplay: block 설정 후 heightline-height를 같은 값으로 설정하면 된다.
이 때 white-space: nowrap 속성으로 자동 줄바꿈이 안되도록 해야한다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!-- HTML -->
<main>
<span> I'm a centered line. </span>
</main>

<!-- CSS -->
<style>
main span {
display: block;
width: 50%;
height: 100px;
line-height: 100px;
padding: 20px;
white-space: nowrap;
}
</style>

one line / inline / vertically

1-2. 여러 줄일 경우

부모 요소에 display: table, 자식 요소에 display: table-cell, vertical-align: middle 사용

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!-- HTML -->
<div class="center">
<span>I'm vertically centered multiple lines of text in a CSS-created table layout.</span>
</div>

<!-- CSS -->
<style>
.center {
display: table;
}
.center span {
display: table-cell;
vertical-align: middle;
}
</style>

multi lines / inline / vertically

2. block 요소를 수직 중앙정렬 할 때

2-1. 정렬할 요소의 높이를 알 때

부모 요소에 position: relative, 자식 요소에 position: absolute를 적용해
height 값을 설정하고 top: 50%, marginheight의 절반만큼 마이너스로 중앙 정렬

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!-- HTML -->
<div class="center">
<div>I'm vertically centered multiple lines of text in a CSS-created table layout.</div>
</div>

<!-- CSS -->
<style>
.center {
position: relative;
height: 300px;
}
.center div {
position: absolute;
top: 50%;
heigth: 100px;
margin-top: -50px;
}
</style>

know height / block / vertically

2-2. 정렬할 요소의 높이를 모를 때

2-1 번의 margin-top 대신 transform: translateY(-50%)를 사용하면 된다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!-- HTML -->
<div class="center">
<div>I'm vertically centered multiple lines of text in a CSS-created table layout.</div>
</div>

<!-- CSS -->
<style>
.center {
position: relative;
height: 300px;
}
.center div {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
</style>

unknown height / block / vertically

동시에 수평, 수직 정렬을 하고 싶을 때

1. 정렬할 요소의 width와 height를 알 때

부모 요소에 position: relative, 자식 요소에 position: absolute 적용 후
top: 50%, left: 50%, margin-topwidth의 절반만큼 마이너스 설정,
margin-leftheight의 절반만큼 마이너스로 설정

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!-- HTML -->
<div class="center">
<div>I'm vertically centered multiple lines of text in a CSS-created table layout.</div>
</div>

<!-- CSS -->
<style>
.center {
position: relative;
}
.center div {
position: absolute;
width: 300px;
height: 200px;
top: 50%;
left: 50%;
margin: -100px 0 0 -150px;
}
</style>

know height / block / horizontally && vertically

2. 정렬할 요소의 width와 height를 모를 때

1번의 margin-top, margin-left 대신 transform: translateY(-50%, -50%)를 사용하면 된다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!-- HTML -->
<div class="center">
<div>I'm vertically centered multiple lines of text in a CSS-created table layout.</div>
</div>

<!-- CSS -->
<style>
.center {
position: relative;
}
.center div {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>

unknown height / block / horizontally && vertically

마무리

flexgrid 속성은 나중에 포스팅 할 예정이기 때문에,
이를 사용하지 않은 방법만 포스팅 했음.

개인적으로 공부한 내용을 정리한 것이기 때문에 반말을 사용한 점 양해 부탁드립니다.
잘못된 부분이나 피드백이 있으시다면, 댓글에 남겨주시면 감사하겠습니다!

공유하기