溫馨提示×

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

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

HTML中怎么利用定位使元素居中

發(fā)布時(shí)間：2021-04-29 14:15:33 來(lái)源：億速云 閱讀：390 作者：小新 欄目：web開(kāi)發(fā)

小編給大家分享一下HTML中怎么利用定位使元素居中，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！

html有什么特點(diǎn)

1、簡(jiǎn)易性：超級(jí)文本標(biāo)記語(yǔ)言版本升級(jí)采用超集方式，從而更加靈活方便，適合初學(xué)前端開(kāi)發(fā)者使用。 2、可擴(kuò)展性：超級(jí)文本標(biāo)記語(yǔ)言的廣泛應(yīng)用帶來(lái)了加強(qiáng)功能，增加標(biāo)識(shí)符等要求，超級(jí)文本標(biāo)記語(yǔ)言采取子類(lèi)元素的方式，為系統(tǒng)擴(kuò)展帶來(lái)保證。  3、平臺(tái)無(wú)關(guān)性：超級(jí)文本標(biāo)記語(yǔ)言能夠在廣泛的平臺(tái)上使用，這也是萬(wàn)維網(wǎng)盛行的一個(gè)原因。 4、通用性：HTML是網(wǎng)絡(luò)的通用語(yǔ)言，它允許網(wǎng)頁(yè)制作人建立文本與圖片相結(jié)合的復(fù)雜頁(yè)面，這些頁(yè)面可以被網(wǎng)上任何其他人瀏覽到，無(wú)論使用的是什么類(lèi)型的電腦或?yàn)g覽器。

元素在瀏覽器窗口居中的方法

這里先給出代碼塊，如果有同學(xué)已經(jīng)看出來(lái)點(diǎn)眉目可以先自己嘗試一下。

 position:fixed;  /*給想要居中的元素設(shè)置*/
 left:50%; /*或者right:50%*/
 top:50%; /*或者bottom:50%*/
 margin-left:-元素寬度的一半;  /*或者margin-right*/
 margin-top:-元素高度的額一半; /*或者margin-bottom*/

好，那接下來(lái)咱們就試一試吧！

<head>
    <meta charset="UTF-8">
    <style>
    /*box是在瀏覽器窗口居中，不是整個(gè)頁(yè)面居中，這樣你在上下滑動(dòng)頁(yè)面時(shí)，
    box元素是不動(dòng)的，因此這里設(shè)置個(gè)box_compare元素能起參照作用，讓它高度
    超過(guò)窗口高度，使頁(yè)面出現(xiàn)滾動(dòng)條*/
        .box_compare {
            width: 100%;
            height: 1000px;
            background: skyblue;
        }
        
        .box {
         /*給元素設(shè)置寬高*/
            width: 500px; 
            height: 300px;
            background: blue;
            position: fixed;
            left: 50%; /*元素最左邊離窗口左邊50%的距離*/
            top: 50%; /*元素最上邊離窗口頂部上邊50%的距離*/
            margin-top: -150px;
            margin-left: -250px;
        }
    </style>
</head>

<body>
    <div class="box_compare"></div>
    <div class="box"></div>
</body>

上面的方法其實(shí)有一個(gè)弊端，即，當(dāng)元素未設(shè)置寬時(shí)是不能使用的，添加了定位后的元素未設(shè)置寬度的元素寬度由內(nèi)容撐開(kāi)的，因此不能使用這個(gè)方法，下面給大家提供一個(gè)更簡(jiǎn)捷的方法。

position: fixed; /*給想要居中的元素設(shè)置*/
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;

這個(gè)方法可能會(huì)有同學(xué)不理解，為什么又是left: 0;right: 0;又是top: 0;bottom: 0;，這個(gè)目的是為了將它變成一個(gè)自由的元素，這時(shí)元素的寬高在未設(shè)置時(shí)默認(rèn)是父元素的寬高，再使用margin: auto;就能使它在瀏覽器窗口居中了，否則，添加了fixed的元素使用margin: auto;是無(wú)效的。
好，接下來(lái)我們?cè)俅螄L試一下。

<head>
<meta charset="UTF-8">
 <style>
  /*box_compare和上面一樣起對(duì)照作用*/
     .box_compare {
        width: 100%;
           height: 1000px;
           background: skyblue;
     }
     .box {
           width: 60%;
           height: 300px;
           background: blue;
           position: fixed;
           left: 0;right: 0;
           top: 0;bottom: 0;
           margin: auto;
      }
     </style>
</head>
<body>
     <div class="box_compare"></div>
     <div class="box"></div>
</body>

上面這個(gè)方法在寫(xiě)web端頁(yè)面時(shí)應(yīng)用很廣，同學(xué)們要多多練習(xí)哈！學(xué)會(huì)了使元素在瀏覽器窗口居中的方法后，那么如何使元素在父元素內(nèi)居中呢？同學(xué)們可以自己思考一下，下期我再給大家介紹！

看完了這篇文章，相信你對(duì)“HTML中怎么利用定位使元素居中”有了一定的了解，如果想了解更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道，感謝各位的閱讀！

向AI問(wèn)一下細(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)容。

AI
助
手