利用css設(shè)置水平垂直居中的幾種方法
代碼內(nèi)容摘抄自asyncnode的 css中的多種垂直水平居中
不討論關(guān)于display:flex這種設(shè)置元素水平垂直居中的情況
/**已知寬高*/
<style>
.container {
width: 500px;
height: 500px;
position: relative;
border: 1px solid #000;
}
.box {
position: absolute;
width: 100px;
height: 100px;
left: 50%;
top: 50%;
background-color: red;
}
</style>
<div class="container">
<div class="box"></div>
</div>
設(shè)置負(fù)margin做到居中
.box {
margin-top: -50px;
margin-left: -50px;
}
設(shè)置calc
.box {
left: calc(50% - 50px);
top: calc(50% - 50px);
}
為什么可以做到水平垂直居中
在css中国旷，定位元素（絕對(duì)定位，相對(duì)定位）的起始點(diǎn)都是以自身的左上角開始的，所以，當(dāng)你設(shè)置了left和top都是50%的時(shí)候，也就是相當(dāng)于找到了父元素的水平垂直的點(diǎn)哥牍，然后設(shè)置自身的負(fù)一半就是為了讓自身的水平垂直居中的點(diǎn)和父元素的點(diǎn)重合，這樣就做到了水平垂直居中。
其實(shí)在未知寬高時(shí)浸锨，利用transform的translate(-50%, -50%)也是可以說(shuō)什上面一樣，因?yàn)閠ranslate是獲取自身的寬高然后進(jìn)行移動(dòng)的版姑。
附上自己畫的一張丑圖
無(wú)標(biāo)題.png
附上大佬的解釋
left和top都是相對(duì)于父元素的左上角柱搜，如果這個(gè)元素都設(shè)置50%的話，他本身的寬高你也要計(jì)算在內(nèi)啊剥险，所以要往回移動(dòng)本身元素的-50%
還有一些其他的水平垂直居中方法聪蘸，可以去看我再上面附上的鏈接，這里就不寫了
