Dev/HTML, CSS
[css] div 요소 화면 정중앙에 배치하기, flex box 활용
bskyvision.com
2020. 11. 8. 23:40
div 요소를 어떤 크기의 화면에서든 정중앙에 위치하고 싶다면, 다음과 같이 flex box를 이용하면 됩니다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.flex-container{
width: 100%;
height: 100vh;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-moz-box-align: center;
-ms-flex-align: center;
align-items: center; /* 수직 정렬 */
-webkit-box-pack: center;
-moz-box-pack: center;
-ms-flex-pack: center;
justify-content: center; /* 수평 정렬 */
}
.hello{
background-color: aqua;
}
</style>
</head>
<body>
<div class="flex-container">
<div class="hello">안녕하세요. 저는 비스카이비전입니다. 만나서 반갑습니다.</div>
</div>
</body>
</html>
|
cs |
align-items: center는 수직 가운데 정렬에 기여하고, justify-content: center는 수평 가운데 정렬에 기여합니다. 그리고 height: 100vh;로 해주는 것이 중요합니다. 그래야 디바이스에 관계 없이 화면에서 수직 중간에 위치하게 됩니다.
위 코드를 실행하시면 정확히 화면의 정중앙에 div 요소가 위치하게 됩니다.
(이 글은 2021-6-8에 마지막으로 수정되었습니다)