CSS3 水平垂直居中

知更鸟 Web前端评论386阅读模式

当使用top: 50%和left: 50% 是以左上角为原点,故不处于中心位置,可以用translate()实现水平垂直居中。

文章源自知更鸟-https://zmingcx.com/css3-translate-centered.html

CSS3 水平垂直居中

CSS3 水平垂直居中

文章源自知更鸟-https://zmingcx.com/css3-translate-centered.html

translate()是css3的新特性,在不知道自身宽高的情况下,可以利用它来进行水平垂直居中。文章源自知更鸟-https://zmingcx.com/css3-translate-centered.html

translate(-50%,-50%) 作用是,往上(x轴),左(y轴)移动自身长宽的 50%,以使其居于中心位置。文章源自知更鸟-https://zmingcx.com/css3-translate-centered.html

.box {
	position: fixed;
	top: 0;
	left: 50%;
	width: 100%;
	height: 100px;
	max-width: 640px;
	min-width: 320px;
	border: 1px solid red;
	transform: translateX(-50%);
}

或者文章源自知更鸟-https://zmingcx.com/css3-translate-centered.html

.box {
	position: absolute;
	top: 50%;
	left: 50%;
	color: #fff;
	border-radius: 5px;
	border: 1px solid #ff0000;
	background: #ff0000;
	-webkit-transform: translate(-50%,-50%);
	-moz-transform: translate(-50%,-50%);
	transform: translate(-50%,-50%);
}

与负margin-left和margin-top实现居中不同的是,margin-left必须知道自身的宽高,而translate可以在不知道宽高的情况下进行居中,translate()函数中的百分比是相对于自身宽高的百分比,所以能进行居中。文章源自知更鸟-https://zmingcx.com/css3-translate-centered.html

实例:文章源自知更鸟-https://zmingcx.com/css3-translate-centered.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.content {
	position: relative;
	position: fixed;
	top: 50%;
	left: 50%;
	width: 300px;
	height: 300px;
	border-radius: 10px;
	-webkit-transform: translate(-50%,-50%);
	-moz-transform: translate(-50%,-50%);
	transform: translate(-50%,-50%);
	border: 1px solid #666;
}
.box {
	position: absolute;
	top: 50%;
	left: 50%;
	color: #fff;
	background: #666;
	padding: 10px;
	border-radius: 10px;
	border: 1px solid #666;
	-webkit-transform: translate(-50%,-50%);
	-moz-transform: translate(-50%,-50%);
	transform: translate(-50%,-50%);
}
</style>
</head>
<body>
<div class="content">
	<div class="box">
		<p>居中文字</p>
	</div>
</div>
</body>
</html>
文章源自知更鸟-https://zmingcx.com/css3-translate-centered.html文章源自知更鸟-https://zmingcx.com/css3-translate-centered.html
weinxin
版权声明
本站原创文章转载请注明文章出处及链接,谢谢合作!
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定