Vue项目中使用Html+Css使div在页面中居中显示(水平+垂直)

今天突然想改一下自己写的项目中登录页面的样式,于是行动,在加入记住我按钮后,发现input输入框没有居中显示,于是把input 和其他的一些标签整合到一个div层中,但是整个div的样式要居中显示,于是乎找到一些修改的方法,以下内容:

1)div使用绝对布局,设置margin:auto;并设置top、left、right、bottom的值相等即可,不一定要都是0。

.main{
	text-align: center;
	background-color: #fff;
	border-radius: 20px;
	width: 300px;
	height: 350px;
	margin: auto;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}

2)让left和top都是50%,这在水平方向上让div的最左与屏幕的最左相距50%,垂直方向上一样,所以再用transform向左(上)平移它自己宽度(高度)的50%,也就达到居中效果了。

 .main{
	text-align: center;
	background-color: #fff;
	border-radius: 20px;
	width: 300px;
	height: 350px;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
}

两种方式实现的效果相同如下图:
Vue项目中使用Html+Css使div在页面中居中显示(水平+垂直)
HTML+CSS,让div在屏幕中居中(水平居中+垂直居中)方法总结
文章部分内容来源

匿名

发表评论

匿名网友