第一種方法：position絕對定位 + CSS3里transform實現(xiàn)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>div元素水平垂直居中</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
background-color: #EAEAEA;
}
.box {
width: 200px;
height: 200px;
background-color: #1E90FF;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
本方法涉及知識點復(fù)習(xí)：
1旭咽、* { ... }
符號* 相當(dāng)于選擇器，代表html所有的元素莫矗，包括html標(biāo)簽绑蔫、body標(biāo)簽等蛔垢。
代碼中將頁面中的所有元素的margin嚎于，padding均設(shè)置為0掘而。并設(shè)置整個頁面背景色為#EAEAEA（灰白色）。
2于购、利用到CSS3中的transform屬性
.box { ... }中袍睡，將首先設(shè)置<div>盒子的寬度/長度均為200px，背景色為#1E90FF（湖藍色）肋僧。
然后設(shè)置該元素的position屬性為absolute絕對定位斑胜，此時<div>脫離文檔流（絕對定位使元素的位置與文檔流無關(guān)），并且相對于最近的祖先元素定位嫌吠。
注意：此時的top和left都設(shè)置成50%伪窖，容易陷入誤區(qū)，認為<div>已經(jīng)處于頁面的正中間居兆？但并不是，此時布局如下圖：
定位原點是左上角竹伸，而非圖片中心
因此我們還需要利用transform屬性泥栖，transform: translate(-50%, -50%);使圖片相對自己左移/上移動自身長度的50%簇宽。
