這多是實現登陸框居中最簡捷的方法

時間 2019-12-05

標籤實現登陸居中簡捷方法简体版

原文原文鏈接

常見登陸框

不少狀況下，網站的登陸框，就像這樣css

這樣html

這樣前端

YouTube瀏覽器

或者這樣微信

錘子科技學習

總之，登陸面板位於頁面正中央，水平居中，豎直居中。而且 隨着瀏覽器窗口大小變化，始終居中網站

方法一

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登陸框居中問題</title>
    <style type="text/css">
        *{margin: 0;padding: 0}
        html,body{height: 100%}     /*這裏很關鍵*/

        .outer-wrap{
            /*只有同時爲html和body設置height: 100%時，這裏的height才生效，
            而且隨瀏覽器窗口變化始終保持和瀏覽器視窗等高*/
            height: 100%;    
            position: relative;
            background-color: rgba(0, 0, 0, .5);
        }
        .login-panel{
            width: 400px;
            height: 300px;
            background-color: orange;
            position: absolute;
            top: 50%;
            left: 50%;
            margin-top: -150px;
            margin-left: -200px;
        }
    </style>
</head>
<body>
    <div class="outer-wrap">
        <div class="login-panel">登陸面板</div>
    </div>
</body>
</html>

效果以下：spa

方法一code

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

方法二

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

先看代碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登陸框居中問題</title>
    <style type="text/css">
        *{margin: 0;padding: 0}
        html,body{height: 100%}     /*這裏很關鍵*/

        .outer-wrap{
            /*只有同時爲html和body設置height: 100%時，這裏才生效，
            而且隨瀏覽器窗口變化始終保持和瀏覽器視窗等高*/
            height: 100%;    
            position: relative;
            background-color: rgba(0, 0, 0, .5);
        }
        .login-panel{
            width: 400px;
            height: 400px;
            background-color: orange;
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            margin: auto;
        }
    </style>
</head>
<body>
    <div class="outer-wrap">
        <div class="login-panel">第二種方法實現登陸面板</div>
    </div>
</body>
</html>

效果以下：

方法二

咱們經常使用定位的時候，通常狀況下只設置上下、左右其中的一個，若是同時設置了top,bottom,left,right四個屬性，只有top和left生效。因此這個方法妙就妙在設置了四個定位屬性的同時設置了margin：auto。你們能夠本身試一下。

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

我的建了前端學習羣，旨在一塊兒學習前端。純淨、純粹技術討論，非前端人員勿擾！入羣加我微信：iamaixiaoxiao。