亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

如何利用定位使元素居中(web端頁面布局小技巧)

  發(fā)布時間：2020-05-06 16:23:25   作者：qq_41860731   我要評論
這篇文章主要介紹了如何利用定位使元素居中(web端頁面布局小技巧)，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

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

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

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

好，那接下來咱們就試一試吧！

<head>
    <meta charset="UTF-8">
    <style>
    /*box是在瀏覽器窗口居中，不是整個頁面居中，這樣你在上下滑動頁面時，
    box元素是不動的，因此這里設(shè)置個box_compare元素能起參照作用，讓它高度
    超過窗口高度，使頁面出現(xiàn)滾動條*/
        .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>

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

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

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

<head>
<meta charset="UTF-8">
 <style>
  /*box_compare和上面一樣起對照作用*/
     .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>

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

到此這篇關(guān)于如何利用定位使元素居中(web端頁面布局小技巧)的文章就介紹到這了,更多相關(guān)頁面定位使元素居中內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！

相關(guān)文章

最新評論