水平垂直居中

 1 <html lang="en">
 2 
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7     <title></title>
 8     <style>
 9         .big {
10             width: 400px;
11             height: 300px;
12             background: navy;
13             margin: 0 auto;
14             position: relative;
15         }
16         
17         .small {
18             width: 100px;
19             height: 100px;
20             background: violet;
21             position: absolute;
22             top: 50%;
23             left: 50%;
24             margin-top: -50px;
25             margin-left: -50px;
26         }
27     </style>
28 </head>
29 
30 <body>
31     <div class="big">
32         <div class="small"></div>
33     </div>
34 </body>
35 
36 </html>