溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

如何設(shè)置一個(gè)DIV塊固定在屏幕中央

發(fā)布時(shí)間：2021-09-14 13:58:24 來源：億速云 閱讀：254 作者：小新 欄目：web開發(fā)

這篇文章主要介紹如何設(shè)置一個(gè)DIV塊固定在屏幕中央，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

方法一：

對(duì)一個(gè)div進(jìn)行以下設(shè)置即可實(shí)現(xiàn)居中。

<style>   
#a{   
    position: fixed;   
    top: 0px;   
    left: 0px;   
    rightright: 0px;   
    bottombottom: 0px;   
    margin: auto;   
}   
</style>
<!doctype html>  
<html lang="zh-cn">  
<head>  
    <meta charset="UTF-8">  
    <title>Document</title>  
    <style>  
        *{   
            margin: 0px;   
            padding: 0px;   
        }   
        #a{   
            width: 200px;   
            height: 200px;   
            background-color: aquamarine;   
            position: fixed;   
            top: 0px;   
            left: 0px;   
            right: 0px;   
            bottom: 0px;   
            margin: auto;   
        }   
    </style>  
</head>  
<body>  
<p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p>  
<p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p>  
<p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p>  
<p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p>  
<p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p>  
<p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p>  
<p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p>  
<p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p>  
<p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p>  
<p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p>  
<p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p>  
<p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p>  
<p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p>  
<p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p>  
<p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p>  
<p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p>  
<p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p>  
<p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p>  
<p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p>  
<p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p>  
<p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p>  
    <div id="a">  
        sdvcdvf   
    </div>  
</body>  
</html>

效果：

如何設(shè)置一個(gè)DIV塊固定在屏幕中央

方法二：

使用js操作div的屬性為下面這樣即可實(shí)現(xiàn)居中。

<style>   
   #a{   
        width: 200px;   
        height: 200px;   
        background-color: aquamarine;   
        position: fixed;   
    }   
</style>   
  
<script>   
    window.onload=function(){   
        var a = document.getElementById("a");//獲取div塊對(duì)象   
        var Height=document.documentElement.clientHeight;//取得瀏覽器頁面可視區(qū)域的寬度   
        var Width=document.documentElement.clientWidth;//取得瀏覽器頁面可視區(qū)域的寬度   
        var gao1 = a.offsetHeight;//獲取div塊的高度值   
        var gao2 = a.offsetWidth;//獲取div塊的寬度值   
        var Sgao1= (Height - gao1)/2+"px";   
        var Sgao2= (Width - gao2)/2+"px";   
        a.style.top=Sgao1;   
        a.style.left=Sgao2;   
    }   
</script>

效果：

如何設(shè)置一個(gè)DIV塊固定在屏幕中央

以上是“如何設(shè)置一個(gè)DIV塊固定在屏幕中央”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

div
AI
助
手