1. HTTP3W博客首页
  2. 技术

元素在网页中居中

定义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

发表评论

您的电子邮箱地址不会被公开。

联系我们

254007489

在线咨询:点击这里给我发消息

邮件:wtao219@qq.com

工作时间:周一至周五,9:30-18:30,节假日休息