티스토리 뷰

Language/HTML, CSS

CSS. 가로세로 중앙정렬

out of coding 2018. 3. 3. 10:19

이것저것 혼자서 만들고 있는게 있어서 html도 건드리고 있습니다.

하던중에 CSS만 가지고 중앙 정렬을 하는 방법을 찾아보았더니 있더군요.

아마도 많이 사용할것 같습니다. 로딩같은것 띄울때는 더더군다나 많이 쓸것 같은.


제가 만들고 싶었던 화면입니다.

대충 디자인은 이렇습니다.



답은 이것인데 설명을 드리겠습니다.


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
<html>
<head>
    <style>
        body {
            padding: 0;
            margin: 0;
        }
        #container { 
            width: 100vw;
            height: 100vh;
            background-color: black;
            text-align: center;
            vertical-align: middle;
            display: table-cell;
        } 
        #block { 
            width: 50px;
            height: 50px;
            background-color: gray;
            display:inline-block;
        }
        .white_label {
            color: white;
        }
    </style>
</head>
<body>
    <div id="container">
        <div id="block">&nbsp;</div></br>
        <label class="white_label">Loading</label>
    </div>
</body>
</html>
cs


일단 body의 margin과 padding을 다 뺏고요.

그 아래의 contaner는 중앙에 노출하고 싶은 로딩 같은 이미지? 의 컨테이너 입니다.


그 부분을 설명을 드리면 width를 전부다, height를 전부다 사용하고, 그안의 block을 중앙으로 보내기 위해서 text-align과 vertical-align 그리고 display를 사용하였습니다.


table-cell로 지정하면서 container div를 마치 table 태그 안의 td처럼 하나의 table-cell과 같이 사용하는 방법이라고 합니다.


그 아래 block의 display: inline-block를 이용하여서 중앙으로 보내는겁니다.


CSS쪽은 이리저리 많은 부분들을 봐야하겠군요.


저작자표시

'Language > HTML, CSS' 카테고리의 다른 글

HTML. Show popup in window center  (0) 2020.07.31
CSS. Basic Button Styling  (0) 2018.03.02
[CSS] <table border="0"> 사용시, Warning날때 CSS적용  (0) 2014.02.26
[CSS] HTML File에 CSS를 적용하는 방법들  (0) 2014.02.26
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2024/05   »
일 월 화 수 목 금 토
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
글 보관함