如何利用定位使元素居中(web端頁面布局小技巧)
我要評(píng)論元素在瀏覽器窗口居中的方法
這里先給出代碼塊，如果有同學(xué)已經(jīng)看出來點(diǎn)眉目可以先自己嘗試一下。
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是在瀏覽器窗口居中，不是整個(gè)頁面居中，這樣你在上下滑動(dòng)頁面時(shí)，
box元素是不動(dòng)的，因此這里設(shè)置個(gè)box_compare元素能起參照作用，讓它高度
超過窗口高度，使頁面出現(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)容撐開的，因此不能使用這個(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;是無效的。
好，接下來我們?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è)方法在寫web端頁面時(shí)應(yīng)用很廣，同學(xué)們要多多練習(xí)哈！學(xué)會(huì)了使元素在瀏覽器窗口居中的方法后，那么如何使元素在父元素內(nèi)居中呢？同學(xué)們可以自己思考一下，下期我再給大家介紹！
到此這篇關(guān)于如何利用定位使元素居中(web端頁面布局小技巧)的文章就介紹到這了,更多相關(guān)頁面定位使元素居中內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！
相關(guān)文章
- 本文主要介紹了絕對(duì)定位元素的水平垂直居中的方法，有3種方法可供參考，需要的朋友一起來看下吧2016-12-23
- 這篇文章主要介紹了CSS實(shí)現(xiàn)定位元素居中的方法,主要涉及到transform和margin的使用,需要的朋友可以參考下2015-06-23
CSS絕對(duì)定位元素left設(shè)為50%實(shí)現(xiàn)水平居中
絕對(duì)定位的元素left設(shè)為50%時(shí)，是已左上角為原點(diǎn)的，所以只要再使用margin屬性添加負(fù)值補(bǔ)償回來即可，下面示例代碼，需要的朋友可以參考下2014-09-04將一個(gè)絕對(duì)定位的div水平垂直居中對(duì)齊
在某些時(shí)候可能需要將一個(gè)絕對(duì)定位的div在它的父對(duì)象中垂直居中對(duì)齊，可能用到的頻率不是太高，但是偶爾也會(huì)用到，下面就簡(jiǎn)單介紹一下如何實(shí)現(xiàn)此功能2014-01-27使用絕對(duì)定位+負(fù)外邊距讓DIV層水平垂直居中頁面
在html中水平居中使用margin:0px auto;可以實(shí)現(xiàn)，但垂直居中使用外邊距是無法達(dá)到效果的，這里使用絕對(duì)定位+負(fù)外邊距的方式來實(shí)現(xiàn)垂直居中，需要的朋友可以參考下2013-11-13- 這個(gè)使用 li的起始位置在居中的50%的地方，所以需要把li 向左邊移動(dòng)50%。 這里想問題的時(shí)候要注意，position:relative所定義的移動(dòng)百分比不是相對(duì)于自身的，而是相對(duì)于父元2013-09-30
CSS實(shí)現(xiàn)網(wǎng)頁分欄布局的方法：絕對(duì)定位和浮動(dòng)
網(wǎng)頁制作Webjx文章簡(jiǎn)介：在CSS中，實(shí)現(xiàn)分欄布局有兩種方法。第一種方法是使用四種CSS定位選項(xiàng)（absolute 、static、relative和fixed）中的絕對(duì)定位（absolute positioning2009-04-02CSS高級(jí)技巧:網(wǎng)頁布局-CSS教程-網(wǎng)頁制作-網(wǎng)頁教學(xué)網(wǎng)
上一篇CSS教程 文章：CSS高級(jí)技巧:文字環(huán)繞圖片 布局 CSS至關(guān)重要的作用, CSS的設(shè)計(jì)初衷. CSS布局和幾年前table橫行時(shí)的布局又不太一樣, 在結(jié)構(gòu)化語義化的HTML文檔2008-10-17