如何使按钮的中心点出现在中心，而不是元素的左侧？

Question

我在使按钮出现在屏幕中央时遇到问题。该按钮应该位于屏幕中央，但不知何故我的 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>

Answer 1

使用绝对位置和 top/left 指向元素的左上角。另外使用 transform: translate(-50%, -50%); 将按钮移动到他 height/width

50% 的顶部和左侧

如何使按钮的中心点出现在中心，而不是元素的左侧？

How to make the center point of a button appear on center, not on the left of the element?

html

css

center

button