9.1 수평 중심 정렬
요소의 중심 정렬은 웹 디자인에서 가장 기본적인 작업 중 하나야. 미적인 레이아웃을 만들고 쉽게 읽히도록 하지. 아래에서는 현대 CSS 기술을 사용하여 수평 및 수직 정렬하는 여러 방법을 살펴볼게.
1. margin: auto를 사용한 블록 요소 중심 정렬
블록 요소를 중심 정렬하는 가장 간단한 방법 중 하나는 margin: auto를 사용하는 거야.
예시:
CSS
.centered-box {
width: 200px;
height: 100px;
background-color: #3498db;
margin: 0 auto;
}
HTML
<div class="centered-box"></div>
코드 설명:
margin: 0 auto;: 왼쪽과 오른쪽에 자동으로 여백을 설정하여 요소를 수평으로 정렬해줘
2. text-align을 사용한 인라인 요소 중심 정렬
블록 요소 내에서 인라인 또는 인라인 블록 요소를 정렬하려면 text-align: center 속성을 사용할 수 있어.
예시:
CSS
.container {
text-align: center;
background-color: #f1c40f;
padding: 20px;
}
.inline-element {
background-color: #e74c3c;
display: inline-block;
padding: 10px;
color: white;
}
HTML
<div class="container">
<div class="inline-element">인라인 요소</div>
</div>
코드 설명:
text-align: center;: 블록 컨테이너 내에서 인라인(또는 인라인 블록) 요소를 중앙에 위치시켜줘
3. Flexbox를 사용한 요소 중심 정렬
Flexbox는 요소를 수평 및 수직으로 중심 정렬하는 유연하고 간단한 방법을 제공해.
예시:
CSS
.flex-container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #2ecc71;
}
.centered-box {
width: 200px;
height: 100px;
background-color: #3498db;
}
HTML
<div class="flex-container">
<div class="centered-box"></div>
</div>
코드 설명:
display: flex;: 컨테이너를 Flexbox로 설정해줘justify-content: center;: 요소를 수평으로 중앙에 정렬해줘align-items: center;: 요소를 수직으로 중앙에 정렬해줘 (이 부분은 나중에 더 자세히 설명할게)
9.2 수직 중심 정렬
1. Flexbox를 사용한 중심 정렬
Flexbox는 요소를 수직으로 정렬하는 쉬운 방법을 제공해줘.
예시:
CSS
.flex-container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #2ecc71;
}
.centered-box {
width: 200px;
height: 100px;
background-color: #3498db;
}
HTML
<div class="flex-container">
<div class="centered-box"></div>
</div>
코드 설명:
align-items: center;: 요소를 수직으로 중앙에 위치시켜줘
2. CSS Grid를 사용한 중심 정렬
CSS Grid는 요소를 정렬하는 데 강력한 기능을 제공해:
CSS
.grid-container {
display: grid;
place-items: center;
height: 100vh;
background-color: #9b59b6;
}
.centered-box {
width: 200px;
height: 100px;
background-color: #3498db;
}
HTML
<div class="grid-container">
<div class="centered-box"></div>
</div>
코드 설명:
display: grid;: 컨테이너를 CSS Grid로 설정해줘place-items: center;: 요소를 수평 및 수직으로 중앙에 위치시켜줘
3. 절대 위치와 CSS 변환을 이용한 수직 중심 정렬
절대 위치와 CSS 변환을 사용하여 요소를 수직으로 정렬할 수 있어.
예시:
CSS
.container {
position: relative;
height: 100vh;
background-color: #e74c3c;
}
.centered-box {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 200px;
height: 100px;
background-color: #3498db;
}
HTML
<div class="container">
<div class="centered-box"></div>
</div>
코드 설명:
position: absolute;: 요소를 컨테이너 기준으로 절대 위치를 설정해줘top: 50%;,left: 50%;: 요소를 컨테이너의 상단과 왼쪽에서 50% 이동시켜줘transform: translate(-50%, -50%);: 요소의 너비와 높이의 50%만큼 이동시켜 요소를 중앙에 위치시켜줘
4. 테이블과 셀을 사용한 수직 중심 정렬
테이블과 셀을 사용하여 요소를 수직으로 정렬할 수 있어.
예시:
CSS
.table-container {
display: table;
width: 100%;
height: 100vh;
background-color: #f39c12;
}
.table-cell {
display: table-cell;
vertical-align: middle;
text-align: center;
}
.centered-box {
display: inline-block;
background-color: #3498db;
padding: 20px;
color: white;
}
HTML
<div class="table-container">
<div class="table-cell">
<div class="centered-box">중심 정렬된 요소</div>
</div>
</div>
코드 설명:
.table-container:table디스플레이로 설정된 컨테이너를 만들어줘.table-cell:middle로 세로 정렬된 테이블 셀을 만들어줘
GO TO FULL VERSION