css在width和height都是auto，实现登录页面居中

最新推荐文章于 2022-11-21 21:02:08 发布

xiaohaizi15

最新推荐文章于 2022-11-21 21:02:08 发布

阅读量256

点赞数

文章标签： css html css3

本文链接：https://blog.csdn.net/xiaohaizi15/article/details/107455612

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
            .box {
                position:fixed;
                width: 500px;
                height: 400px;
                background-color: brown;
                top: 50%;
                left: 50%;
                 margin-left: -250px;
                margin-top: -200px; 
            }
            .box .login {
                width: 300px;
            }
    </style>
</head>
<body>
    <div class="box">
        <div class="login">
            <!-- <form action="">
                <label for="">用户名
                   <input type="text">
                </label>
                <label for="">
                   <input type="password" name="" id="">
                </label>
               
                <button>登录</button>
            </form> -->
        </div>
    </div>
</body>
</html>

在这里插入图片描述

2 遮层不能点击事件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.outer{
				position: fixed;
				width: 100%;
				height: 100%;
				background: rgba(0,0,0,.5);
				top: 0px;
				left: 0px;
			}
			.outer .box{
				position: absolute;
				width: 400px;
				height: 300px;
				background: cornflowerblue;
				left:50%;
				top:50%;
				margin-left: -200px;/*负的自身宽度的一半*/
				margin-top: -150px;/*负的自身高度的一半*/
			}
		</style>
	</head>
	<body>
		<ul>
			<li><a href="pageCenter.html">xxxxx</a></li>
		</ul>
		<div class="outer">
			<div class="box">
				
			</div>
		</div>
	</body>
</html>

在这里插入图片描述

xiaohaizi15

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css在width和height都是auto，实现登录页面居中

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .box {
复制链接

扫一扫