1. 首先第一种，使用定位，需要知道自身的宽高
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <style> 7 .parent { 8 width: 500px; 9 height: 500px; 10 background-color: coral; 11 position: relative; 12 } 13 .child { 14 width: 200px; 15 height: 200px; 16 background-color: cadetblue; 17 position: absolute; 18 left: 50%; 19 top: 50%; 20 margin-left: -100px; 21 margin-top: -100px; 22 } 23 </style> 24 </head> 25 <body> 26 <div class="parent"> 27 <div class="child"></div> 28 </div> 29 </body> 30 </html>
2.第二种，使用定位，可以不知道自身宽高，但是你设置的时候必须要有宽高
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <style> 7 .parent { 8 width: 500px; 9 height: 500px; 10 background-color: coral; 11 position: relative; 12 } 13 .child { 14 width: 200px; 15 height: 200px; 16 background-color: cadetblue; 17 position: absolute; 18 left: 0; 19 right: 0; 20 top: 0; 21 bottom: 0; 22 margin: auto; 23 } 24 </style> 25 </head> 26 <body> 27 <div class="parent"> 28 <div class="child"></div> 29 </div> 30 </body> 31 </html>
3.第3种，使用定位，使用css3新特效translate
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <style> 7 .parent { 8 width: 500px; 9 height: 500px; 10 background-color: coral; 11 position: relative; 12 } 13 .child { 14 width: 200px; 15 height: 200px; 16 background-color: cadetblue; 17 position: absolute; 18 left: 50%; 19 top: 50%; 20 transform: translate(-50%,-50%); <!--将自身定位后向上平移自身50%，向左平移50%--> 21 } 22 </style> 23 </head> 24 <body> 25 <div class="parent"> 26 <div class="child"></div> 27 </div> 28 </body> 29 </html>
4.也是我最最最喜欢的一种，使用flex布局
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <style> 7 .parent { 8 width: 500px; 9 height: 500px; 10 background-color: coral; 11 display: flex; 12 justify-content: center; 13 align-items: center; 14 } 15 .child { 16 width: 200px; 17 height: 200px; 18 background-color: cadetblue; 19 } 20 </style> 21 </head> 22 <body> 23 <div class="parent"> 24 <div class="child"></div> 25 </div> 26 </body> 27 </html>
5. 使用js代码，比较繁琐，不推荐
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <style> 7 .parent { 8 width: 500px; 9 height: 500px; 10 background-color: coral; 11 } 12 .child { 13 width: 200px; 14 height: 200px; 15 background-color: cadetblue; 16 } 17 </style> 18 </head> 19 <body> 20 <div class="parent"> 21 <div class="child"></div> 22 </div> 23 </body> 24 <script> 25 let parent = document.getElementsByClassName('parent')[0]; 26 let child = document.getElementsByClassName('child')[0]; 27 let parentWidth = parent.offsetWidth; 28 let parHeight = parent.offsetHeight; 29 let childWidth = child.offsetWidth; 30 let childHeight = child.offsetHeight; 31 child.style.position = "absolute"; 32 child.style.left = (parentWidth-childWidth)/2 +'px'; 33 child.style.top = (parHeight-childHeight)/2 +'px' 34 </script> 35 </html>
6.使用table-cell，verticle-aligh设置行内元素的竖直方向定位，text-align设置文本的水平定位，所以子元素必须是有行内才能居中，不推荐使用。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <style> 7 .parent { 8 width: 500px; 9 height: 500px; 10 background-color: coral; 11 display: table-cell; 12 vertical-align: middle; 13 text-align: center; 14 } 15 .child { 16 width: 200px; 17 height: 200px; 18 background-color: cadetblue; 19 display: inline-block; 20 } 21 </style> 22 </head> 23 <body> 24 <div class="parent"> 25 <div class="child"></div> 26 </div> 27 </body> 28 </html>