绝对定位和负magin值
<div class="parent">
<div class="child"></div>
</div>
div.parent {
width: 400px;
height: 400px;
background: #EDEDED;
position: relative;
}
div.child {
width: 200px;
height: 200px;
background: green;
position: absolute;
left: 50%;
top: 50%;
margin-left: -100px;
margin-top: -100px;
}
绝对定位 + left/right/bottom/top + margin
div.parent {
width: 400px;
height: 400px;
background: #EDEDED;
position: relative;
}
div.child {
width: 200px;
height: 200px;
background: green;
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
margin: auto;
}
flex
这种方法在不定宽高的时候也可以使用,页面结构如上,效果预览
div.parent {
width: 400px;
height: 400px;
background: #EDEDED;
display: flex;
justify-content:center;
align-items: center;
}
div.child {
width: 300px;
height: 200px;
background: green;
}
绝对定位+transform
这个方法在不定宽高中也使用过,页面结构不变,效果预览
div.parent {
width: 400px;
height: 400px;
background: #EDEDED;
position: relative;
}
div.child {
width: 100px;
height: 100px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background: green;
}
table-cell + vertical-align + inline-block
先提醒一下,vertical-align
的值是middle
,而不是center
页面结构不变,效果预览
div.parent {
width: 400px;
height: 400px;
background: #EDEDED;
display: table-cell;
text-align: center;
vertical-align: middle;
}
div.child {
width: 100px;
height: 100px;
display: inline-block;
background: green;
}