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%);
}

兩種方式實現的效果相同如下圖：

HTML+CSS，讓div在螢幕中居中（水平居中+垂直居中）方法總結
文章部分內容來源