這可能是實現(xiàn)登錄框居中最簡捷的方法

shery 發(fā)布于2019-08-30 15:53 / 1618人閱讀

摘要：常見登錄框很多情況下，網(wǎng)站的登錄框，就像這樣這樣這樣或者這樣錘子科技總之，登錄面板位于頁面正中央，水平居中，豎直居中。并且隨著瀏覽器窗口大小變化，始終居中方法一實現(xiàn)思路使用兩個嵌套，外層的寬高設(shè)置為瀏覽器視窗大小，相對定位。

常見登錄框

很多情況下，網(wǎng)站的登錄框，就像這樣

這樣

YouTube

或者這樣

錘子科技

總之，登錄面板位于頁面正中央，水平居中，豎直居中。并且?隨著瀏覽器窗口大小變化，始終居中

方法一

實現(xiàn)思路：使用兩個div嵌套，外層div的寬高設(shè)置為瀏覽器視窗大小，相對定位。內(nèi)層div絕對定位，將top屬性和left屬性分別設(shè)置為50%，然后再設(shè)置負(fù)邊距，大小分別是height和width的一半。
代碼如下：




    
    登錄框居中問題
    


    
        登錄面板

效果如下：

方法一

錘子科技pc端的登錄頁面就是用類似方法一的方式實現(xiàn)的

方法二

實現(xiàn)思路：給外層div設(shè)置相對定位，給內(nèi)層div設(shè)置width，height，絕對定位，同時將top,left,bottom,right屬性設(shè)置為0，margin為auto。

先看代碼




    
    登錄框居中問題
    


    
        第二種方法實現(xiàn)登錄面板

效果如下：

方法二

我們常常使用定位的時候，一般情況下只設(shè)置上下、左右其中的一個，如果同時設(shè)置了top,bottom,left,right四個屬性，只有top和left生效。所以這個方法妙就妙在設(shè)置了四個定位屬性的同時設(shè)置了margin：auto。大家可以自己試一下。

這個方法用來設(shè)置內(nèi)層div居中于外層div，效果特別好。

個人建了前端學(xué)習(xí)群，旨在一起學(xué)習(xí)前端。純凈、純粹技術(shù)討論，非前端人員勿擾！入群加我微信：iamaixiaoxiao。

云服務(wù)器 GPU云服務(wù)器阿里云登錄服務(wù)器的時候是命令框 html框居中 php搜索框文字居中 js實現(xiàn)的登錄

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/116594.html

相關(guān)文章

這可能是實現(xiàn)登錄框居中最簡捷的方法

摘要：常見登錄框很多情況下，網(wǎng)站的登錄框，就像這樣這樣這樣或者這樣錘子科技總之，登錄面板位于頁面正中央，水平居中，豎直居中。并且隨著瀏覽器窗口大小變化，始終居中方法一實現(xiàn)思路使用兩個嵌套，外層的寬高設(shè)置為瀏覽器視窗大小，相對定位。常見登錄框很多情況下，網(wǎng)站的登錄框，就像這樣 showImg(https://segmentfault.com/img/remote/1460000008644...

fai1017 2019-08-21 11:35 評論0 收藏0
【CSS練習(xí)】IT修真院--練習(xí)4-移動端界面

摘要：任務(wù)四一個最常見的移動端頁面完成的事情完成簡單布局，然后填充界面與效果圖對比優(yōu)化完成驗收要求擴(kuò)展性頂欄固定進(jìn)行樣式兼容性研究完成任務(wù)四深度思考跟隨深度思考師兄建議進(jìn)行修改輸入欄左側(cè)換用輸入限制電話位，密碼位根據(jù)結(jié)構(gòu)的語義化修改嘗試下再加一任務(wù)四、一個最常見的移動端頁面完成的事情完成簡單布局，然后填充界面與效果圖對比優(yōu)化完成驗收要求：header擴(kuò)展性 & 頂欄固定進(jìn)行p...

kun_jian 2019-08-29 15:39 評論0 收藏0
你們要的HTML布局技巧：如何規(guī)范搭建網(wǎng)頁架構(gòu)？

摘要：主體內(nèi)容區(qū)域小米首頁下小米商城的主題內(nèi)容區(qū)域，也是整體網(wǎng)頁面積最廣的區(qū)塊實在不知道定主體內(nèi)容區(qū)塊時也可以根據(jù)面積比重來劃分，最大的那塊一定是主題中心，布局的重復(fù)性很高。單就深入了解布局規(guī)范都足夠說上一個月的，今天我就不論大范圍，挑選小米網(wǎng)站首頁的部分區(qū)塊布局來講解吧！下面是小米官網(wǎng)的首頁，很多人一看到這樣的網(wǎng)頁就傻眼，不知道咋弄，要么就隨性布局，要么就干看著，其實遇到問題首先一點就...

yvonne 2019-08-30 15:56 評論0 收藏0
你們要的HTML布局技巧：如何規(guī)范搭建網(wǎng)頁架構(gòu)？

摘要：主體內(nèi)容區(qū)域小米首頁下小米商城的主題內(nèi)容區(qū)域，也是整體網(wǎng)頁面積最廣的區(qū)塊實在不知道定主體內(nèi)容區(qū)塊時也可以根據(jù)面積比重來劃分，最大的那塊一定是主題中心，布局的重復(fù)性很高。單就深入了解布局規(guī)范都足夠說上一個月的，今天我就不論大范圍，挑選小米網(wǎng)站首頁的部分區(qū)塊布局來講解吧！下面是小米官網(wǎng)的首頁，很多人一看到這樣的網(wǎng)頁就傻眼，不知道咋弄，要么就隨性布局，要么就干看著，其實遇到問題首先一點就...

KaltZK 2019-08-02 14:28 評論0 收藏0
你可能不知道的一些css小知識

摘要：在此，特地列舉一些里比較容被忽略的小知識，希望能對你有所幫助。橢圓的實現(xiàn)跟圓形的實現(xiàn)一樣，這里也是用到屬性，但是你可能不知道，是一個簡寫屬性，可以單獨為四個角分別設(shè)置水平和垂直半徑，只要用到一個正斜杠即可。 css是一門功能強(qiáng)大、具備完整生態(tài)的復(fù)雜語言。它擁有很多的技巧，但是生活工作中我們可能不怎么會接觸到，這包括一些實際上挺實用的技巧。在此，特地列舉一些css里比較容被忽略的小知識...

劉厚水 2019-08-30 15:44 評論0 收藏0