怎么才能让我的按钮停在肚脐上？

Question

我面临的问题是，我的按钮超出了我的肚脐，我担心的错误是位置:绝对选项，但我无法选择把按钮放在图像的中央。

它只是一个带有HTML的简单按钮：

<section class="home">
            <img src="assets/Front_Cover.png" alt="" class="home-image-img">
            <button class="home-button">Get Started</button>

        </section>

和CSS：

.home-button {
    position: absolute;
    bottom: 47%;
    left: 47%;
    padding: 10px;
    background-color: #195154;
    color: white;
    border: 0px;
    border-radius: 6px;
    transition: all 0.2s ease 0s;
}

问题

Answer 1

这会起作用的

.home{
  position: relative
}
.home-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%)
    padding: 10px;
    background-color: #195154;
    color: white;
    border: 0px;
    border-radius: 6px;
    transition: all 0.2s ease 0s;
}

Answer 2

使用position:relative;而不是position: absolute;

具有位置的元素:相对的；相对于其正常位置的。 设置相对定位元素的上、右、下和左属性将使其远离其正常位置。其他内容将不会调整，以适应任何空白的元素。源w3schools.com

Answer 3

这正是问题所在:如果一个元素具有atribute position: absolute;，那么该元素可以出现在其他元素之上。您可以尝试调整“顶部”和“左边”属性，以将按钮准确地放在您想要的位置。请记住，通过设置position: absolute;，您可以将元素放置在父元素中的任何位置(在您的示例中)。

另一个解决方案是移动navBar。