盒子居中的所有方式

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>