CSS实现垂直水平居中的3种方法

最新推荐文章于 2023-04-20 19:23:56 发布

李湘湘

最新推荐文章于 2023-04-20 19:23:56 发布

阅读量509

点赞数

分类专栏： css垂直水平居中文章标签： css3 flex

本文链接：https://blog.csdn.net/qq_40255459/article/details/105530236

版权

css垂直水平居中专栏收录该内容

1 篇文章 0 订阅

订阅专栏

body部分代码

在这里插入图片描述

方法一

利用:befoer伪类实现垂直水平居中

.ess {
	width: 600px;
	height: 300px;
	background-color: #2c405a;
	display: block;
}
.ess:before {
	content: '';
	height: 100%;
	display: inline-block;
	vertical-align: middle;
}
.ess_cont {
	background: #4cd964;
	width: 200px;
	height: 200px;
	display: inline-block;
	vertical-align: middle;
}

方法二

利用flex布局实现垂直水平居中

.ess {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100vh;
	background-color: #2c405a;
}
.ess_cont {
	background: #4cd964;
	width: 200px;
	height: 200px;
}

方法三

利用position: absolute;+transform: translate() 实现垂直水平居中

.ess {
	background: #2c405a;
	height: 100vh;
	width: 100%;
}
.ess_cont {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background: #4cd964;
	width: 200px;
	height: 200px;
}