這可能是實現登錄框居中最簡捷的方法

fai1017 發布于2019-08-21 11:35 / 1737人閱讀

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

常見登錄框

很多情況下，網站的登錄框，就像這樣

這樣

YouTube

或者這樣

錘子科技

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

方法一

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




    
    登錄框居中問題
    


    
        登錄面板

效果如下：

方法一

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

方法二

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

先看代碼




    
    登錄框居中問題
    


    
        第二種方法實現登錄面板

效果如下：

方法二

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

這個方法用來設置內層div居中于外層div，效果特別好。

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

云服務器 GPU云服務器阿里云登錄服務器的時候是命令框 html框居中 php搜索框文字居中 js實現的登錄

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/86883.html

這可能是實現登錄框居中最簡捷的方法

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

shery 2019-08-30 15:53 評論0 收藏0
【CSS練習】IT修真院--練習4-移動端界面

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

kun_jian 2019-08-29 15:39 評論0 收藏0
你們要的HTML布局技巧：如何規范搭建網頁架構？

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

yvonne 2019-08-30 15:56 評論0 收藏0
你們要的HTML布局技巧：如何規范搭建網頁架構？

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

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

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

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