絕對定位和負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;
}