块级元素水平，垂直居中的两种方式

最新推荐文章于 2022-12-22 11:41:55 发布

weixin_33835103

最新推荐文章于 2022-12-22 11:41:55 发布

阅读量97

点赞数

方式一：利用margin

<!DOCTYPE html>
<html>
    <head>
        <title>块级元素水平，垂直居中</title>
        <meta charset="utf-8">
        <style>
        	.wrapper {
        		height: 600px;
        		border: 1px solid gray;
        	}
        	.box {
        		width: 100px;
        		height: 100px;
        		background: gold;
        		margin: 250px auto 0;
        	}
        </style>
    </head>
    <body>
		<div class="wrapper">
			<div class="box"></div>
		</div>
    </body>
</html>

方式二，利用定位及负边距

<!DOCTYPE html>
<html>
    <head>
        <title>块级元素水平，垂直居中</title>
        <meta charset="utf-8">
        <style>
        	.wrapper {
        		height: 600px;
        		border: 1px solid gray;
        		position: relative;
        	}
        	.box {
        		width: 100px;
        		height: 100px;
        		background: gold;
        		position: absolute;
        		left: 50%;
        		top: 50%;
        		margin-left: -50px;
        		margin-top: -50px;
        	}
        </style>
    </head>
    <body>
		<div class="wrapper">
			<div class="box"></div>
		</div>
    </body>
</html>

关注博主即可阅读全文