.blue {
width: 560px;
height: 560px;
background-color: #4d6ada;
display: table-cell;
text-align: center;
vertical-align: middle;
}
.img {
width: 455px;
height: 455px;
}
.content {
position: relative;
margin: 40px;
}
.qiaoshijia {
position: absolute;
border: 1px solid #cda3b1;
background-color: #cda3b1;
color: #ffffff;
top: -70px;
padding: 10px;
font-size: 26px;
font-weight: 400;
}
我看 .blue 和 .content 都是正常文档流,如果你只是想让“方块乔”在中间,就
<div class="blue"></div>
<div class="乔"></div>
<div class="content"></div>
此时你想让“方块乔”在哪直接加外边距就可以了,比如居中,距上-30px,距下20px;
.乔{
margin:-30px auto 20px;
}
从前端优化上讲,可以用transform:translate(),代替不必要的margin,以避免重绘或回流
float以后通过margin下沉