div{
	width: 500px;
	height: 400px;
	position: absolute;
	top: 50%;
	left: 50%;
	margin-left: -250px;
	margin-top: -200px;
	background-color: black;
}

這樣就居中了

但是如果要適配移動端的話，這個div可能就會顯得比較大，一般情況下左右兩邊會超出螢幕。

最好的辦法應該把width設為100%，這樣就能適配各種的解析度。

所以我做了以下更改

div{
	width: 100%;
	max-width: 500px;
	height: 400px;
	position: absolute;
	top: 50%;
	left: 50%;
	margin-left: -250px;
	margin-top: -200px;
	background-color: black;
}
 

貌似這樣就可以解決問題了

但問題又來了，當頁面的寬度小於500px的時候，比如400px，卻要向左移動250px，按照left:50%來算應該從200開始減去250，所以是-50px

所以適配又出了問題

那麼我們要怎麼做呢？

這個時候我突然想到

margin: 0 auto;

然後就把這段程式碼放了上去。

怎麼調都沒辦法居中。

然後突然想到一個解決方法：

使用

position: relative;

margin: 0 auto;

html,body{
	width: 100%;
	height: 100%;
}

div{
	width: 100%;
	max-width: 500px;
	height: 400px;
	margin: 0 auto;
	position: relative;
	top: 50%;
	margin-top: -200px;
	background-color: black;
}