投稿
  1. HTTP3W博客首页
  2. 技术

元素在网页中居中

诺米 • • 技术, 源代码 • 阅读 732

定义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、原创文章，作者：诺米，如若转载，请注明出处：https://www.http3w.com/archives/691

2、本站内容若有雷同从属巧合，若侵犯了您的权益，请联系本站删除，E-mail: wtao219@qq.com

赞 (0)
诺米诺米
0 0 打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022年4月6日 pm3:13
下一篇 2022年4月11日 am5:28

相关推荐

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注

记住昵称、邮箱和网址，下次评论免输入