。。。。在日常代碼中，如何讓一個浮動元素垂直居中呢？
兩種方式：
1.未知元素的寬高======
2.已知元素寬高======
首先我們用第一種方式來演示：代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
div{
position: absolute;
margin:auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 400px;
height: 400px;
background-color: red;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
效果如下：
其次我們使用第二種方式：代碼如下
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style type="text/css"> 7 div{ 8 position: absolute; 9 top: 50%; 10 left: 50%; 11 margin-top: -200px; 12 margin-left: -200px; 13 width: 400px; 14 height: 400px; 15 background-color: blue; 16 17 } 18 </style> 19 </head> 20 <body> 21 <div></div> 22 </body> 23 </html>
效果如下：
以上兩種方式均可實現浮動元素的居中；
注：值得注意的是，以上方式元素的父元素要相對定位； 對於已知寬高的元素 ：只需要top 和left 方向上 各給50%； 然后使用margin-top：元素高的一半（負值）；
margin-left：元素寬的一半（負值）；