一，已知宽高
1 <style> 2 #box { 3 height: 400px; 4 width: 400px; 5 border: 1px solid grey; 6 position: relative; 7 } 8 .son { 9 height: 300px; 10 width: 300px; 11 border: 1px solid grey;15 16 17 } 18 </style> 19 </head> 20 <body> 21 <div id="box"> 22 <div class="son"> 23 已知宽高 24 </div> 25 </div> 26 </body>
1. (absolute+负maigin)
1 position: absolute; 2 top: 50%; 3 left: 50%; 4 margin-top: -150px; 5 margin-left: -150px;
2. (absolute+maigin:auto)
1 position: absolute; 2 top: 0; 3 left: 0; 4 right: 0; 5 bottom: 0; 6 margin: auto;
3.（absolute+calc）
这里的50%是父元素宽高的50%
1 position: absolute; 2 top:calc(50% - 150px); 3 left:calc(50% - 150px);
4 （父元素display：flex；子元素：margin: auto）
1 #box { 2 display: flex; 3 } 4 .son { 5 margin: auto; 6 }
二、未知宽高
1，absolute+transform（依赖translate 2d的兼容性）
1 position:absolute; 2 top:50%; 3 left:50%; 4 transform:translate(-50%,-50%);
2，利用flex布局
#box { display: flex; align-items: center; justify-content: center; }