元素在网页中居中

诺米 • • 前段技术, 源代码 • 1053 阅读

定义CSS样式：

<style>
     div{
		width: 450px;
		height: 300px;
		background-color: #abcdef;
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%,-50%);
		text-align: center;
	}
</style>

说明：

在CSS3中，可以使用translate()方法将元素沿着水平方向（X轴）和垂直方向（Y轴）移动。
对于位移translate()方法，我们分为3种情况：

ranslateX(x)：元素仅在水平方向移动（X轴移动）水平方向向右移动；
translateY(y)：元素仅在垂直方向移动（Y轴移动）垂直方向向下移动；
transklate(x,y)：元素在水平方向和垂直方向同时移动（X轴和Y轴同时移动）

网页元素：

<body>
   <div>待居中元素</div>
</body>

1、所有文章未经授权禁止转载、摘编、复制或建立镜像，如有违反，追究法律责任。
2、本站文章部分来源注册用户发布或互联网收集而来，若有侵权，请邮件联系作者。
邮箱地址：wtao219@qq.com
THE END
分享
二维码
< <上一篇
下一篇>>