CSS3 水平垂直居中

知更鸟 2021年11月8日13:07:20Web前端评论852阅读模式

当使用top: 50%和left: 50% 是以左上角为原点,故不处于中心位置,可以用translate()实现水平垂直居中。文章源自知更鸟-https://zmingcx.com/css3-translate-centered.html

文章源自知更鸟-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
weinxin
版权声明
本站原创文章转载请注明文章出处及链接,谢谢合作!
animation动画复合属性 Web前端

animation动画复合属性

css3中的animation动画复合属性:name(绑定的动画名称) duration(完成时间) timing-function(如何完成一个周期) delay(启动前间隔) iteration-...
网页特效live2d看板娘 WordPress

网页特效live2d看板娘

如果喜欢给自己的网站加些花花草草,live2d看板娘就是一个不错的特效,人物会跟随你的鼠标动,超级可爱! 看板娘   将下面代码添加到网页适当位置即可。 <script src="ht...
安卓文本无法垂直居中 Web前端

安卓文本无法垂直居中

安卓 webview 的字体大小在小于 12 像素的时候无法使用行高来垂直居中。目前在微信等应用都存在该问题,而在最新的移动端 Chrome 浏览器上无该问题(截止本文编写时间,微信客户端的 chro...
匿名

发表评论

匿名网友

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

确定