HTML anchor 按钮问题

Question

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

这是我的 HTML

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

这是我的 CSS。

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

当我尝试创建按钮时，它似乎忽略了我设置的边距并在页面的最底部对齐。

Bottom of page

当我尝试将它的定位设置为绝对定位并放置 left: 50% 时，它似乎将自己定位在一个不在中心的奇怪位置。

.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;
}

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/