css超簡單實現div頁面居中【適合作彈出框】

時間 2019-11-12

原文原文鏈接

1.前言html

如今項目中用到彈出框的話大部分都是直接用控件的。不過有控件雖方便，但有時候會有衝突的地方。我上次用layui的彈出框控件，而後也用到了百度的編輯器uEditor，而後一切都好好的，結果編輯賦值不成功。我也不知道什麼問題。若是有知道緣由的大神，求賜教！編輯器

因此說一旦有不兼容的彈出框，就本身畫了。畫多了，就習慣了。今天就分享一個方法【可是這個方法的原理我居然琢磨不透！】ui

2.詳情spa

代碼是這樣的，一個div.point無寬高度，left:50%;top：50%;這樣的話，就會在頁面的正中間，而後div.pop設置了500px的寬高，居左，居上各-250px的距離。而後這個div.pop就會在頁面居中了；設計

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <style>
        .point{position:absolute;left:50%; top:50%;}
        .pop{width:500px; height:500px; position:absolute;left:-250px; top:-250px; border:2px solid red; }
    </style>
</head>
<body>
    
        <div class="point">
            <div class="pop"></div>
        </div>

</body>
</html>

而後效果圖是這樣的code

而後這樣的話它就居中了。我一直不明白的就是，我並無設置position:relative，那麼這樣的話div就應該相對於body進行絕對定位了。我這個代碼中的第一個div.point確實是相對於body進行絕對定位了。那麼我這第二個div的父級並無設置positon:relative。那麼它應該是否是也應該相對於body絕對定位呢。可是事實並非這樣子呢，它是相對於div.point進行了絕對定位。【雖然效果實現了，可是原理並非特別懂，求大神賜教】xml

我一直就是用這種方法作的彈出框。不過，實際應用中，最外層還得加一個div。而後這個div設置成100%寬高度，posiotn:fixed;left:0;top:0;這樣的話彈出框居中了，鼠標也滾動不了。效果較真實一點；htm

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <style>
        .point{position:absolute;left:50%; top:50%;}
        .pop{width:500px; height:500px; position:absolute;left:-250px; top:-250px; border:2px solid red; }
    </style>
</head>
<body>
    <div  style="width:100%; height:100%;left:0;top:0; position:fixed;background:rgba(0,0,0,0.3)">
 
        <div class="point">
            <div class="pop"></div>
        </div>
    </div>


</body>
</html>

實現效果以下：blog

這樣的話，一個居中的彈出框就實現了，在頁面的正中間。不過代碼實現了，原理不是特別懂，還但願各位對我進行指點一二，讓我能真正明白這個理！謝了。utf-8

3.總結

但願這種寫法可以幫助到須要的小童鞋。也但願我文中的不足不要影響到你們，若是有錯誤的地方，請你們告之。

4.追加

根據大神程序猿到攻城獅之旅的指點。我大概領會了。我上面的代碼要作一下修改.修改後以下。其實我根本不須要第一個div.point。這個div設計top:50%;left:50%後，它的左上角那個點其實就已經在頁面中間了，這個時候，我只要向左向右移動想要的負像素，就可讓div往中間靠近了。這樣的話，更容易理解，並且更簡單。固然了，外層再加個div做爲遮罩層仍是頗有必要的。

<body>
    <div style="position:absolute; top:50%;left:50%; width:500px; height:500px; margin-top:-250px; margin-left:-250px; border:2px solid red"></div>
</body>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。