html 登录界面居中显示,登录框居中问题的html+css

方法一

实现思路：使用两个p嵌套，外层p的宽高设置为浏览器视窗大小，相对定位。内层p绝对定位，将top属性和left属性分别设置为50%，然后再设置负边距，大小分别是height和width的一半。

代码如下：

登录框居中问题

*{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;

}

登录面板

效果如下：

方法二

实现思路：给外层p设置相对定位，