讓div在屏幕中居中（水平居中+垂直居中）
時間：2023-08-29 22:48:02 | 來源：網(wǎng)站運(yùn)營
時間：2023-08-29 22:48:02 來源：網(wǎng)站運(yùn)營
讓div在屏幕中居中（水平居中+垂直居中）：
html代碼
<div class="main">
<h1>測試</h1>
</div>
方法一：div使用絕對布局，設(shè)置margin:auto,并設(shè)置top、left、right、bottom的值相等即可，不一定要都是0。
方法二：絕對布局，用margin來調(diào)整。
方法三：絕對布局，讓left和top都是50%，這在水平方向上讓div的最左與屏幕的最左相距50%，垂直方向上一樣，所以再用transform向左（上）平移它自己寬度（高度）的50%。
這里補(bǔ)充一下知識點(diǎn)：translate()函數(shù)是css3的新特性.在不知道自身寬高的情況下，可以利用它來進(jìn)行水平垂直居中。當(dāng)使用：top: 50%;left: 50%;是以左上角為原點(diǎn)，故不處于中心位置。translate(-50%,-50%) 作用是，往上（x軸）,左（y軸）移動自身長寬的 50%，以使其居于中心位置。與負(fù)margin-left和margin-top實(shí)現(xiàn)居中不同的是，margin-left必須知道自身的寬高，而translate可以在不知道寬高的情況下進(jìn)行居中，tranlate（）函數(shù)中的百分比是相對于自身寬高的百分比，所以能進(jìn)行居中。
效果圖：
在線咨詢