方法一：
以前设置里面的绿div总是会使用{position:absolute;left:50%;top:50%;margin-left:-div宽度的一半;margin-top:-div高度的一半}。
这样比较麻烦，还需要自己计算高度和宽度，后来发现可以使用transform:translate(-50%,-50%);来代替margin，就能很好的解决了。
代码：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> .box{ 400px; height:400px; margin:0 auto; position:relative; border:1px solid black; } .content{ 200px; height:200px; background:green; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); } </style> </head> <body> <div class="box"> <div class="content"></div> </div> </body> </html>
方法二：
<div class="box4"> <div class="child4"></div> </div>
.box4{
100px;
height:100px;
background:gray;
position:relative;
}
.child4{
background:red;
50px;
height:50px;
margin:auto;
position:absolute;
top:0;
left:0;
bottom:0;
right:0;
}
方法三：
<div class="box1"> <div class="child1"></div> </div>
.box1{
100px;
height:100px;
background:gray;
text-align:center;/*居中效果只对文本内容和行内元素有效*/
display:table-cell;
vertical-align:middle;
}
.child1{
display:inline-block;
background:red;
50px;
height:50px;
}
方法四：
<div class="box2"> <div class="child2"></div> </div>
.box2{
100px;
height:100px;
background:gray;
display:table-cell;
vertical-align:middle;
}
.child2{
margin:0 auto;/*在元素本身上设置，可以实现块级元素水平居中*/
background:red;
50px;
height:50px;
}
方法五：
display:flex + margin:auto
<div class="box2">
<div class="child2"></div>
</div>
.box2{ width:100px; height:100px; background:gray; display:flex; } .child2{ margin:auto; background:red; width:50px; height:50px; }