이번 시간에는 div 태그로 이루어진 박스를 가운데로 정렬하는 방법에 대해 살펴보겠습니다.
- maring을 이용한 가운데 정렬
- position:absolute를 이용한 가운데 정렬
이 두 방법 모두 계산의 편리를 위해 box-sizing을 border-box로 설정하여 width가 컨텐츠, 테두리, 패딩을 모두 포함한 길이로 설정하게 했습니다.
1. margin을 이용한 가운데 정렬
- 가장 많이 사용되는 방법 중 하나로 div 태그의 가로의 길이를 설정 후 좌 우에 margin을 auto로 주는 방법입니다. 이 방법은 부트스트랩4에서 mx-auto라는 클래스로 제공하고 있습니다.(참고 링크) 여기서는 부트스트랩4에서 제공하는 클래스가 아닌 직접 작성한 예시를 통해 살펴보겠습니다. 필요한 설명은 주석으로 처리했습니다.
|
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
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>div 가운데 정렬 예제</title>
<style>
*{
/* body 태그의 불필요한 margin 제거를 위해*/
margin: 0;
/* 태그의 가로를 테두리+패딩+컨텐츠를 포함한 길이로 설정하기 위해*/
box-sizing: border-box;
}
.container{
/* 박스의 가로를 800px로 */
width: 800px;
/* 브라우저의 높이를 박스의 높이로*/
height: 100vh;
/* 박스를 가운데로 */
margin: 0 auto;
/* 만들어진 박스의 가로를 확인하기 위한 테두리 */
border: 2px solid black;
}
</style>
</head>
<body>
<div class="container"></div>
</body>
</html>
|
2. position:absolute를 이용한 가운데 정렬
|
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
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>div 가운데 정렬 예제</title>
<style>
*{
/* body 태그의 불필요한 margin 제거를 위해*/
margin: 0;
/* 태그의 가로를 테두리+패딩+컨텐츠를 포함한 길이로 설정하기 위해*/
box-sizing: border-box;
}
.container{
/* 박스의 가로를 800px로 */
width: 800px;
/* 브라우저의 높이를 박스의 높이로*/
height: 100vh;
/* 만들어진 박스의 가로를 확인하기 위한 테두리 */
border: 2px solid black;
position: absolute;
/* position을 absolute로 할 경우 다른 박스들과 겹칠수 있기 때문에 z-index를 높여
겹치더라도 위에 있게하기 위해 적당한 수로 설정 */
z-index: 10;
/* box-sizing을 border-box로 설정했기 때문에 width의 반인 400px를 빼주면 된다.
box-sizing 설정을 안했을 경우 border와 padding의 값도 계산해야 한다. */
left: calc(50% - 400px);
}
</style>
</head>
<body>
<div class="container"></div>
</body>
</html>
|
실행 결과
