HTML锚定按钮问题

Question

我正试图在我的网站底部创建一个按钮。

这是我的HTML

100x+

这是我的CSS。

<center><a href="#" id="btn1" class="btn1">
    View 
</a></center>

当我尝试创建按钮时，它似乎忽略了我设置的页边距，并使其自身恰好在页面的底部。

Bottom of page

当我尝试将其位置设置为绝对位置并向左放置时：50％似乎将自己定位在不在中心的怪异位置。

.btn1 {
    margin: 60px 0px 60px 0px;
    color: white;
    background: #ED7836;
    padding: 10px 30px 10px 30px;
    text-decoration: none;
    font-size: 20px;
}

Doesn't align in the centre

谢谢。

Answer 1

您必须添加transform: translate(-50%, 0%);才能使其居中。

.btn1 {
    position: absolute;
    left: 50%;
    margin: 60px 0px 60px 0px;
    color: white;
    background: #ED7836;
    padding: 10px 30px 10px 30px;
    text-decoration: none;
    font-size: 20px;
}

说明：

没有起源，就像您所说的那样（实际上应该是这样） https://jsfiddle.net/z5qo8yaj/

您需要使用翻译将其围绕原点移动（长度减半） 添加 translate https://jsfiddle.net/h1qzdoLm/