CSS3的flex布局

 1 DOCTYPE html>
 2 html>
 3   head>
 4     meta charset="utf-8" />
 5     title>flex居中布局title>
 6     style type="text/css">
 7       html,
 8       body {
 9         border: solid 1px yellow;
10         height: 100%;
11       }
12       #out {
13         width: 100%;
14         height: 100%;
15         margin: auto;
16         border: solid 1px black;
17         display: flex;
18         /* justify-content: center;
19         align-items: center; */
20       }
21       #mid {
22         width: 300px;
23         height: 300px;
24         border: solid 1px blue;
25 
26         /* position: absolute;
27         left: 50%;
28         top: 50%;
29         transform: translate(-50%, -50%); */
30 
31         display: flex;
32         margin: auto;
33         /*flex子元素设置margin:auto，
34         相当于flex容器元素设置 
35         justify-content: center;align-items: center;
36         */
37       }
38       #in {
39         width: 100px;
40         height: 100px;
41         border: solid 1px red;
42         margin: auto;
43       }
44     style>
45   head>
46   body>
47     div id="out">
48       div id="mid">
49         div id="in">div>
50       div>
51     div>
52   body>
53 html>