[HTML/CSS] DIV 중앙, 가운데 배치하기
2021. 2. 23. 11:19728x90
DIV를 웹화면 중앙에 배치하는 방법에 대하여 알아 보도록 하겠습니다.
블로그를 하거나 웹화면을 만들 때 content 배치를 center 또는 middle로 하고자 할 경우가 있습니다. 그런 경우 간단하게 CSS속성으로 중앙 배치를 할 수 있습니다.
핵심 CSS 태그
- position:absolute;
→ 절대 위치를 적용하기 위해 position값을 absolute로 설정 합니다.
- top: 50%; left: 50%;
→ 절대 위치를 위에서부터 50% 되는 지점, 그리고 왼쪽에서부터 50%되는 지점으로 설정합니다.
→ 이렇게 설정하게 되면 중앙에서부터 해당 영역이 시작 됩니다.
- height:300px; width:400px;
→ DIV의 크기를 설정 합니다.
- margin:-150px 0px 0px -200px;
→ 중앙에서부터 시작되는 것을 div이 너비의 반, 높이의 반 위치만큼 왼쪽 그리고 위로 이동 해 줍니다.
※ position속성을 절대위치로 설정하고 DIV 위치를 top, left속성을 이용하여 중앙으로 설정 합니다.
그러나 DIV의 크기에 의해 정중앙 위치가 되지 않습니다.
따라서 margin 속성을 이용하여 DIV의 크기의 절반만큼 반대로 이동 시켜 주게 되면 DIV는 화면의 정중앙에 위치하게 됩니다.
또한 브라우저 크기를 조절 해 보아도 중앙을 유지하게 됩니다.
예제 소스
|
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
40
41
42
|
<!DOCTYPE html>
<html>
<head>
<title>DIV 화면 중앙에 배치하기</title>
<style>
body { padding:0px; margin:0px; }
#divPosition {
background-color: #00D8FF;
border: 1px solid #5D5D5D;
position:absolute;
height:300px;
width:400px;
margin:-150px 0px 0px -200px;
top: 50%;
left: 50%;
padding: 5px;
}
</style>
</head>
<body>
<div id="divPosition">
DIV 화면 중앙에 배치하기 예제1 입니다.
</div>
</body>
</html>
|
cs |
예제 결과
이번 시간에는 DIV 가운데 배치하는 방법에 대하여 알아 보았습니다.
출처: Joy [바가지] 프로그래밍/HTML, CSS, JavaScript 블로그
728x90
'PROGRAMING > HTML , CSS' 카테고리의 다른 글
| [html/css] margin 속성 자세히 알아 보기(margin-top,margin-left, margin-bottom, margin-left 설정 방법) (0) | 2021.03.03 |
|---|---|
| [html/css] padding 속성 사용법(padding-right, padding-left, padding-top, padding-bottom) (0) | 2021.03.03 |
| [HTML,CSS] display:none 과 visibility:hidden 의 차이 (0) | 2021.03.03 |
| [HTML] Form 의 이해 (1) | 2021.02.23 |
| [HTML/CSS] Table 꾸미기 / 배경색 추가하기 (0) | 2021.02.23 |