１．css3的flex
1 <style>
2 .ss {
3 display: flex;
4 justify-content: center;
5 align-items: center;
6 height:600px;
7 width: 1000px;
8 background-color: #3a9;
9 }
10 .sss {
11 width: 100px;
12 height: 100px;
13 background-color: greenyellow;
14 }
15 </style>
16 <body>
17 <div class="ss">
18 <div class="sss"></div>
19 </div>
20 </body>
2. position:absolute
<style>
.ss {
position: absolute;
left: 50%;
top: 50%;
margin-left: -50px;
margin-top: -50px;
height:100px;
width: 100px;
background-color: #3a9;
}
</style>
<div class="ss"></div>
3.position:absolute
.ss {
width: 200px;
height: 200px;
background: #3a9;
position:absolute;
left:0;
top: 0;
bottom: 0;
right: 0;
margin: auto;
}
<body>
<div class="ss">
</div>
</body>
4.position:absolute
.ss {
width: 40%;
height: 200px;
background: #3a9;
position:absolute;
left:50%;
top: 50%;
transform: translate(-50%, -50%);
}
<div class="ss"></div>
5. 父元素:text-align,line-height;子元素：display:inline-block;
.ss {
text-align: center;
height:600px;
width: 1000px;
background-color: #3a9;
line-height: 600px;
}
.sss {
display: inline-block;
width: 100px;
height: 100px;
background-color: greenyellow;
}
<body>
<div class="ss">
<div class="sss"></div>
</div>
</body>
来源：https://www.cnblogs.com/gaoxuerong123/p/9499820.html