我在按钮出现在屏幕中心时遇到问题。该按钮应该位于屏幕的中央，但不知何故，我的css正在制作，按钮的中心位于左上角。谁知道为什么？更多细节：我希望它是这样的：how it should look
但它看起来像这样：how it looks
有人可以帮忙吗？这是代码：
html, body {margin: 0; height: 100%; overflow: hidden}
img
{
max-width: 100%;
height: auto;
position: relative;
top: 33%;
}
.obj1
{
width: 20%;
height: 100%;
background: rgb(136, 44, 44);
float:left;
position: relative;
}
.obj2
{
width: 20%;
height: 100%;
background: rgb(255, 255, 255);
position: relative;
float:left;
}
.obj3
{
width: 20%;
height: 100%;
background: rgb(0, 0, 0);
position: relative;
float:left;
}
.obj4
{
width: 20%;
height: 100%;
background: rgb(42, 75, 148);
position: relative;
float:left;
}
.obj5
{
width: 20%;
height: 100%;
background: rgb(72, 114, 48);
position: relative;
float:left;
}
.obj6
{
width: 20%;
height: 100%;
background: rgb(119, 39, 112);
position: relative;
float:left;
}
#show-more
{
background: #1594e5;
color: #fff;
font-family: calibri;
display: block;
width: 140px;
font-size: 24px;
text-transform: uppercase;
padding: 10px;
text-align: center;
margin: 20px auto;
cursor: pointer;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%)
}<body>
<div class="obj1">
</div>
<div class="obj2">
</div>
<div class="obj3"></div>
<div class="obj4"></div>
<div class="obj5"></div>
<a id="show-more">Show More</a>
</body>使用绝对位置和顶部/左侧指向元素的左上角。另外使用transform: translate(-50%, -50%);将按钮移动到其高度/宽度的50％的顶部和左侧