。。。。在日常代码中，如何让一个浮动元素垂直居中呢？
两种方式：
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;
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：元素宽的一半（负值）；