CSS实现盒子模型水平垂直居中

最新推荐文章于 2023-11-03 10:33:06 发布

fengxue_snow

最新推荐文章于 2023-11-03 10:33:06 发布

阅读量314

点赞数

分类专栏： CSS 文章标签： CSS

本文链接：https://blog.csdn.net/fengxue_snow/article/details/97916313

版权

CSS 专栏收录该内容

3 篇文章 1 订阅

订阅专栏

1、效果图
在这里插入图片描述
2、代码
01、盒子宽高不固定

<style>
			.clearfix:after {
			 	content: "";
			 	display: block;
			 	clear: both;
			 }
			.box1{
			 	width: 300px;
			 	height: 300px;
			 	background-color: #f0f0f0;
			 	margin: 10px;
			 	float: left;
			 	position: relative;
			}
			.box1-center {
			 	padding:10px;
			 	background:#3FC9C1;
			 	position: absolute;
			 	left: 50%;
			 	top: 50%;
			 	transform: translate(-50%, -50%); /*往上（x轴）,左（y轴）移动自身长宽的 50%*/
			 }
		</style>
		<div class="clearfix">
			<!--盒子宽高不固定-->
			<div class="box1">
				<div class="box1-center">center</div>
			</div>
		</div>

02、知道盒子宽高的情况

<style>
			.clearfix:after {
			 	content: "";
			 	display: block;
			 	clear: both;
			 }
			.box2 {
			 	width: 300px;
			 	height: 300px;
			 	background-color: #f0f0f0;
			 	margin: 10px;
			 	float: left;
			 	position: relative;
			 }
			.box2-center{
			 	width:80px;
			 	height:80px;
			 	line-height:80px;
			 	text-align:center;
			 	background:#3FC9C1;
			 	position: absolute;
			    top: 50%;
			    left: 50%;
			    margin-top: -40px;    /* 自身 height 的一半 */
			    margin-left: -40px;    /* 自身 width 的一半 */
			 }
		</style>
		<!--盒子固定宽高-->
		<div class="box2">
			<div class="box2-center">center</div>
		</div>