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

使用绝对位置和顶部/左侧，您指向元素的左上角。另外，使用transform: translate(-50%, -50%);将按钮移至其身高/宽度的50％的顶部和左侧

如何使按钮的中心点显示在元素中心而不是元素的左边？

1 个答案: