这可能是实现登录框居中最简捷的方法

fai1017 发布于2019-08-21 11:35 / 1615人阅读

摘要：常见登录框很多情况下，网站的登录框，就像这样这样这样或者这样锤子科技总之，登录面板位于页面正中央，水平居中，竖直居中。并且随着浏览器窗口大小变化，始终居中方法一实现思路使用两个嵌套，外层的宽高设置为浏览器视窗大小，相对定位。

常见登录框

很多情况下，网站的登录框，就像这样

这样

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。

服务器托管混合云阿里云登录服务器的时候是命令框 html框居中 php搜索框文字居中 js实现的登录

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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