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

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

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

常見(jiàn)登錄框

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

這樣

YouTube

或者這樣

錘子科技

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

方法一

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




    
    登錄框居中問(wèn)題
    


    
        登錄面板

效果如下：

方法一

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

方法二

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

先看代碼




    
    登錄框居中問(wèn)題
    


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

效果如下：

方法二

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

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

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

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

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/116594.html

相關(guān)文章

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

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

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

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

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

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

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

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

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

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

劉厚水 2019-08-30 15:44 評(píng)論0 收藏0