html实现元素的绝对居中

最新推荐文章于 2024-02-16 09:39:04 发布

行云流水的刘

最新推荐文章于 2024-02-16 09:39:04 发布

阅读量1.8k

点赞数 2

文章标签：学习笔记

本文链接：https://blog.csdn.net/sinat_31907813/article/details/82763926

版权

什么叫绝对居中？
绝对居中即上下居中,左右也居中,即可用定位中的绝对居中,加上margin auto实现
参考代码:

    <!DOCTYPE html>
	<html lang="en">
	<head>
	    <meta charset="UTF-8">
	    <title>Title</title>
	    <style>
	        .box{
	            width: 500px;
	            height: 500px;
	            background: pink;
	            position: absolute;
	            margin: auto;
	            left: 0;
	            top:0;
	            right: 0;
	            bottom: 0;
	        }
	        .box1{
	            width: 200px;
	            height: 200px;
	            background: green;
	            position: absolute;
	            margin: auto;
	            left: 0;
	            top:0;
	            right: 0;
	            bottom: 0;
	        }
	        
	    </style>
	</head>
	<body>
	            <div class="box">
	                <div class="box1"></div>
	            </div>
	</body>
	</html>