如果不知道一个盒子的宽高的话可以使用弹性盒子来垂直居中或者可以使用以下方法,可以用到定位和css中的transform里面的translate移动属性:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#mian{
width: 100px;
height: 100px;
background-color: #007AFF;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
</style>
</head>
<body>
<div id="mian"></div>
</body>
</html>
注意:transform: translate(-50%, -50%); 这里translate移动的百分比是自身盒子的百分比, 所以即使不知道宽度和高度,也可以使用的。