Html 利润率最高的50%使元素脱离屏幕

如果我给元素上50%的利润，它会把它从屏幕上去掉。它应该在中心。但它不在屏幕上。利润率最高的100%应将其降至最低，而不是一半，50%。我做错了什么吗

HTML

---

可以使用视口值而不是ems、pxs或pts

1vw=视口宽度的1%

1vh=视口高度的1%

1vmin=1vw或1vh，以较小者为准

1vmax=1vw或1vh，以较大者为准

尝试

边距顶部：50vh

它将占据视口的50%高度

.buttons{
width:  300px;
height: 50px;
margin-left:auto;
margin-right:auto;
position: relative;
margin-top: 50vh; //changed this
}

---

百分比边距是窗口宽度的百分比，而不是高度的百分比。如果您希望将元素精确地排列在父节点的中间，那么请看这篇文章。

.container{
width: 100%;
margin: 0 auto;
height: 100%; 
position: relative;
overflow: hidden;
}
.buttons{
width:  300px;
height: 50px;
margin-left:auto;
margin-right:auto;
position: relative;
margin-top: 45%;
}
.blog{
width: 100px;
border-radius: 2px;
box-shadow: 0px 0px 2px #ccc;
text-align: center;
padding: 10px 20px;
background-color: #F9690E;
color: #fff;
font-size: 14px;
position: absolute;
left: 0px;
}
.blog:hover{
color: #f9f9f9;
box-shadow: 2px 2px 2px #b9b9b9;
}
.website{
width: 100px;
border-radius: 2px;
box-shadow: 0px 0px 2px #ccc;
text-align: center;
padding: 10px 20px;
background-color: #22A7F0;
color: #fff;
font-size: 14px;
position: absolute;
right: 0px;
}
.website:hover{
color: #f9f9f9;
box-shadow: 2px 2px 3px #b9b9b9;
}
p{ 
height: 50px;
color: #CCC;
text-align: center;
bottom: 10px;
position: absolute;
left: 0;
right: 0;

}

.buttons{
width:  300px;
height: 50px;
margin-left:auto;
margin-right:auto;
position: relative;
margin-top: 50vh; //changed this
}