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에 마지막으로 수정되었습니다)
'Dev > HTML, CSS' 카테고리의 다른 글
| [css] 리스트 앞 기호 내가 원하는 이미지로 바꾸려면? list-style-image 속성 (0) | 2020.12.18 |
|---|---|
| [html] 비밀번호를 최소 6자, 최대 12자까지만 입력하게 하려면? input 태그 minlength, maxlength 속성 (2) | 2020.12.16 |
| [css] 링크 효과 관련 a:link, a:visited, a:hover, a:active 정리 (5) | 2020.11.21 |
| [css] 리스트 앞 기호 및 여백 제거하기 (2) | 2020.11.19 |
| [css] 밑줄 여유있게 치기 (0) | 2020.10.21 |
| [css] 단어를 기준으로 줄바꿈 하려면? word-break:keep-all (2) | 2020.10.15 |
| [html] 예쁜 아이콘을 문자처럼 사용하게 도와주는 Font Awesome 사용법 (0) | 2020.10.14 |
| [css] 글자 굵게 만들어 주는 속성, font-weight (0) | 2020.07.30 |