## 가운데정렬
요소들을 가운데로 정렬하는 다양한 방법에 대해서 알아보자.
- 예제 html
<!DOCTYPE html>
<html>
<head>
<title>center</title>
</head>
<body>
<h3>margin: auto</h3>
<div class="box box1">
<div id="inner inner1"></div>
</div>
<h3>text-align: center</h3>
<div class="box box2">
<button>인라인 버튼</button>
</div>
<h3>translate(50%, 50%)</h3>
<div class="box box3">
<div id="inner inner3"></div>
</div>
<h3>Text centering</h3>
<div class="box box4">
<ht>Text</ht>
</div>
</body>
</html>
margin: auto (블록레벨 요소 가운데 정렬)
블록레벨인 박스는 왼쪽으로 정렬되어 한 줄을 차지한다. 오른쪽 여백은 브라우저에서 자동으로 margin 이 된다.
이 때 margin: auto 속성을 주게 되면 브라우저에서 margin 응 양 옆으로 골구로 분배를 해주어 가운데 정렬이 된다.
(수평 정렬만 가능하다. 수직정렬x)
.inner1 {
margin: auto
}text-align: center (인라인레벨 요소 가운데 정렬)
부모요소인 박스 모델에text-align: center 속성을 주면 자식요소중에 인라인 레벨 요소라면 가운데 정렬이 된다.
(단 블록레벨 자식 요소는 가운데 정렬이 되지 않는다.)
(수평 정렬만 가능하다. 수직정렬x)
.box2 {
text-align: center;
}absolute + translate(50%, 50%) (블록/인라인레벨 요소 가운데 정렬)
position: absolute 속성을 주어 부모 요소를 기준으로 이동할 준비를 한다.
top: 50%, left: 50% 속성을 주어 부모 요소의 사이즈를 기준으로 50%씩 이동한다. 이 때 요소의 왼쪽 위 꼭지점이 기준이 되기 요소의 정가운데를 기준으로 조정을 해주어야한다.
translate(가로이동, 세로이동) 을 활용하여 요소를 정가운데로 조정한다. 이 때 값을 퍼센트로 주게되면 자기 자신의 사이즈의 50%로 계산이된다.
.inner3 {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}요소의 왼쪽 위 꼭지점이 부모요소의 가운데이기 때문에 자기자신의 사이즈 절반만큼 위로, 왼쪽으로 이동하면 정가운데로 위치하게 된다.
Text centering (글자 가운데 정렬)
text-align: center 속성을 이용해서 글자를 수평으로 가운데 정렬한다.
수직정렬은 올바른 방식은 아니지만 텍스트의 높이를 부모요소와 같게 하면 글자가 가운데로 보이게 되도록 해서 설정할 수 있다.
line-height: 100px 속성을 이용해서 글자의 높이를 부모요소와 똑같이 하여 마치 부모요소의 가운데로 이동한것처럼 보이게 할 수 있다. 단 한줄인 글자에서만 사용해야한다. 다음줄로 넘어가게되면 부모요소의 높이 만큼 다음줄로 개행이 되기 때문에 부모를 벗어나게 되기 때문이다.
.box4 h1 {
text-align: center; // 글자 수평 정렬
line-height: 100px; // 글자 수직 정렬, 사이즈는 부모요소의 크기로 주면된다.
}flexbox
justify-content 속성
플렉스 요소의 수평 방향 정렬 방식을 설정한다.
box {
display: flex;
flex-direction: column;
justify-content: center;
}
box {
display: flex;
flex-direction: row;
justyfy-content: center;
}
box {
display: flex;
flex-direction: row;
justyfy-content: center;
align-self: center
}align-items 속성
플렉스 요소의 수직 방향 정렬 방식을 설정한다.
box {
display: flex;
flex-direction: row;
align-items: center // 수직 센터 정렬
}align-self
align-self 속성은 플렉스 컨테이너의 align-items 속성보다 우선 적용된다.
이 속성을 이용하면 플렉스 요소마다 서로 다른 align 속성값을 설정할 수 있다.
.item:nth-child(2) { align-self: flex-start; align-self: flex-start; }
.item:nth-child(3) { align-self: flex-end; align-self: flex-end; }
.item:nth-child(4) { align-self: center; align-self: center; }
.item:nth-child(5) { align-self: baseline; align-self: baseline; }