方法一:
以前设置里面的绿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{width:400px;height:400px;margin:0 auto;position:relative;border:1px solid black;}.content{width: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{width:100px;height:100px;background:gray;position:relative;}.child4{background:red;width:50px;height:50px;margin:auto;position:absolute;top:0;left:0;bottom:0;right:0;}
方法三:
<div class="box1"><div class="child1"></div></div>
.box1{width:100px;height:100px;background:gray;text-align:center;/*居中效果只对文本内容和行内元素有效*/display:table-cell;vertical-align:middle;}.child1{display:inline-block;background:red;width:50px;height:50px;}
方法四:
<div class="box2"><div class="child2"></div></div>
.box2{width:100px;height:100px;background:gray;display:table-cell;vertical-align:middle;}.child2{margin:0 auto;/*在元素本身上设置,可以实现块级元素水平居中*/background:red;width: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;}