使用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>