我有一个代码,并且使用top和margin-top有一些小问题,无法使用top:50%我不知道为什么然后我使用margin-top:50%但它没有将画布移动到页面的中间(50 %),如何将画布移动到页面中间(仅高度而不是宽度)
.so {
position: relative;
top: 50%;
clear: both;
float: left;
left: 10%;
}
@media only screen and (orientation: landscape) {
.so {
position: relative;
margin-top: 50%;
clear: both;
float: left;
left: 10%;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="animatedParent">
<div>
<div class="so">
<canvas width="30" height="30" style="background-color:blue"></canvas>
<canvas width="30" height="30" style="background-color:pink"> </canvas>
<canvas width="30" height="30" style="background-color:gray"> </canvas>
</div>
</div>
</div>
</body>
</html>