如何讓一個(gè)div居于頁(yè)面正中間【實(shí)現(xiàn)方法】

如何讓一個(gè)div居于頁(yè)面中間,我今天說(shuō)的是讓一個(gè)div水平居中同時(shí)垂直居中,而不是簡(jiǎn)單的top:50%,left:50%。當(dāng)然,我們就按一開(kāi)始的思路寫(xiě)一下:top,left屬性都設(shè)為50%,看一下效果。
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>div居于頁(yè)面正中間</title>
- <style type="text/css">
- *{
- margin: 0;
- padding: 0;
- background-color: #EAEAEA;
- }
- div{
- width: 200px;
- height: 200px;
- background-color: #1E90FF;
- }
- .center-in-center{
- position: absolute;
- top: 50%;
- left: 50%;
- }
- </style>
- </head>
- <body>
- <div class="center-in-center"></div>
- </body>
- </html>
從我的截圖可以看出,div的左頂點(diǎn)剛好在頁(yè)面的中心點(diǎn)處?,F(xiàn)在的思路是,如何移動(dòng)div然后讓div的中心和頁(yè)面中心重合,即可達(dá)到我們一開(kāi)始想要的結(jié)果。在這里我要介紹一種方法,使用css的transform屬性。由于這個(gè)屬性的值很多,我這里就不一一介紹,只是說(shuō)一下它的translate。我們給剛才的center-in-center類加上translate(0,-50%)
- .center-in-center{
- position: absolute;
- top: 50%;
- left: 50%;
- transform: translate(0, -50%);
- }
如果使用過(guò)這個(gè)屬性,應(yīng)該知道怎么回事了。translate(0, -50%),第一個(gè)值是指水平移動(dòng)量,和tansform的translateX效果一樣,第二個(gè)值那就是垂直方向偏移量,但為負(fù)數(shù)時(shí),代表反方向移動(dòng)?,F(xiàn)在我們只需tanslate(-50%,-50%)就可以達(dá)到div既水平居中同時(shí)垂直居中。
附上完整代碼與效果:
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>div居于頁(yè)面正中間</title>
- <style type="text/css">
- *{
- margin: 0;
- padding: 0;
- background-color: #EAEAEA;
- }
- div{
- width: 200px;
- height: 200px;
- background-color: #1E90FF;
- }
- .center-in-center{
- position: absolute;
- top: 50%;
- left: 50%;
- -webkit-transform: translate(-50%, -50%);
- -moz-transform: translate(-50%, -50%);
- -ms-transform: translate(-50%, -50%);
- -o-transform: translate(-50%, -50%);
- transform: translate(-50%, -50%);
- }
- </style>
- </head>
- <body>
- <div class="center-in-center"></div>
- </body>
- </html>
說(shuō)多兩句,這也可以是一道非常不錯(cuò)的面試題,大家可以留意一下。當(dāng)然還有其他解法,這里就不再班門弄斧了。另外,css3的transform是一個(gè)非常強(qiáng)大的屬性,可以做很多變換3d之類的炫酷效果,如果有興趣可以深入研究一下。但前端有一個(gè)不得不說(shuō)的痛,瀏覽器兼容性問(wèn)題。。。其他的瀏覽器還好說(shuō),萬(wàn)惡的IE,IE9支持一小部分屬性,IE9以下全部不支持。如果還深愛(ài)著IE,那只能另辟蹊徑,甚至不惜用js去解決咯!又快到周末了,又可以好好睡覺(jué)了,真好!
以上這篇如何讓一個(gè)div居于頁(yè)面正中間【實(shí)現(xiàn)方法】就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
- 下面小編就為大家?guī)?lái)一篇DIV+CSS 清除浮動(dòng)常用方法總結(jié)。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-05-06
- 這篇文章主要為大家詳細(xì)介紹了CSS教程之div垂直居中的多種方法,還包括多行文本垂直居中的方法,感興趣的小伙伴們可以參考一下2016-05-05
關(guān)于div與>div的區(qū)別小結(jié)
下面小編就為大家?guī)?lái)一篇關(guān)于div與>div的區(qū)別小結(jié)。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-05-04- Divxdra1031.Dll2016-04-30
- 圖片溢出div問(wèn)題怎么解決?下面小編就為大家?guī)?lái)一篇圖片溢出div問(wèn)題的快速解決方法推薦。希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2016-04-28
css三種方法實(shí)現(xiàn)div在瀏覽器水平居中
這篇文章主要介紹了css三種實(shí)現(xiàn)div在瀏覽器水平居中的方法,感興趣的小伙伴們可以參考一下2016-04-14一個(gè)div在瀏覽器水平居中的實(shí)現(xiàn)方法
下面小編就為大家?guī)?lái)一篇一個(gè)div在瀏覽器水平居中的實(shí)現(xiàn)方法。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。2016-04-14div+CSS制作類似微信對(duì)話氣泡效果的實(shí)例總結(jié)
這篇文章主要介紹了div+CSS制作類似微信對(duì)話氣泡效果的實(shí)例總結(jié),文中總結(jié)出了四種編寫(xiě)方式,并且對(duì)三角形的繪制有一個(gè)補(bǔ)充說(shuō)明,需要的朋友可以參考下2016-04-01兩個(gè)div疊加觸發(fā)事件發(fā)生閃爍問(wèn)題的解決方法
下面小編就為大家?guī)?lái)一篇兩個(gè)div疊加觸發(fā)事件發(fā)生閃爍問(wèn)題的解決方法。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-05-09