[CSS] table-cell div 수직 수평 정렬

CSS 2015. 1. 28. 14:49
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
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="utf-8">
    <style>
        #wrapper { 
            width:300px; 
            height:300px; 
            background:blue;
             
            display:table-cell;     /* 해당요소에 display : table-cell; 하면 테이블의 셀처럼 배치한다.*/
            text-align:center; 
            vertical-align:middle;
        }
        #box { 
            width:50px; 
            height:50px; 
            background:red;
            display:inline-block;
        }            
    </style>
</head>
<body>
    <div id="wrapper">
        <div id="box"></div>
    </div>
</body>
</html>


반응형
저작자표시

'CSS' 카테고리의 다른 글

[CSS] border 투명도(opacity) 적용하기  (0) 2015.03.27
[CSS][jQuery] :target - a태그 내부링크 타겟 요소에 css적용  (0) 2015.02.09
[CSS] user-select:none 텍스트 드레그 막기  (0) 2015.01.23
[CSS] 음수 margin을 이용한 div 수직, 수평 정렬  (0) 2015.01.07
[CSS] position을 이용한 가변레이아웃  (0) 2015.01.07
Posted by 힘없는염소
,

티스토리툴바