• 코드:
​x
 
1
<!DOCTYPE html>
2
<html lang="ko">
3
​
4
<head>
5
    <meta charset="UTF-8">
6
    <title>CSS3 Flexible Box Layout</title>
7
    <style>
8
        .flexbox {
9
            background-color: dimgray;
10
            width: 400px;
11
            height: 250px;
12
            margin: 10px 0;
13
            border-radius: 15px;
14
            display: -webkit-flex;
15
            display: flex;
16
            -webkit-flex-wrap: wrap;
17
            flex-wrap: wrap;
18
        }
19
        .item {
20
            background-color: darkgray;
21
            border-radius: 10px;
22
            width: 80px;
23
            height: 50px;
24
            color: white;
25
            font-size: 20px;
26
            text-align: center;
27
            line-height: 50px;
28
            margin: auto;
29
        }
30
    </style>
31
</head>
32
​
33
<body>
34
​
35
    <h1>margin 속성을 이용한 플렉스 요소의 가운데 정렬</h1>
36
​
37
    <div class="flexbox">
38
        <div class="item">Center</div>
39
    </div>
40
​
41
</body>
42
​
43
</html>