본문 바로가기
IT_Developers/HTML

HTML - Div를 화면 중앙 가운데 반응형 노출

by 고코더 2019. 6. 21.

DIV로 안내 페이지 만들기


안녕하세요.
고코더 입니다. 


오늘은 DIV를 화면 가운데 중앙에 위치 하게
하는 방법을 알아보겠습니다.

1. 제가 만든 모니터 체크 사이트에서 사용한 HTML 입니다.
안내 페이지로 반응형으로 DIV를 화면 가운데로 노출하였습니다.



 2. HTML을 웹에서 실행 해보세요.

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
<html>
<head>
    <style type="text/css">
        .layer {
            position: absolute;
            text-align: center;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            font-size: 50px;
        }
        .layer .content {
            display: inline-block;
            vertical-align: middle
        }
        .layer .blank {
            display: inline-block;
            width: 0;
            height: 100%;
            vertical-align: middle
        }
    </style>
</head>
 
<body>
 
    <div class="layer">
        <span class="content">div를 화면 가운데 놓기 gocoder.net</span>
        <span class="blank"></span>
    </div>
 
</body>
</html>
cs
 3. 결과 모습입니다. 
간단한 안내 페이지로 활용할때 좋은 방법입니다.




마무리


사람들은 HTML 형식에서도
신뢰를 얻습니다.





댓글