Html 在类中以边界为中心

这可能是一个可笑的问题，但出于某种原因，我似乎无法使这些人保持一致，使他们完全处于中心位置。出于某种原因，边框框似乎在左边，不知道为什么。有人能帮忙吗

jsfiddle

html和css

<div class="container-bottom">
            <a href="http://www.google.com" target="_blank" class="linkbutton">LEARN MORE</a>
            <h4><span></span>Click to find out more </h4>
            </div>


body {
    background: #fff;
}

.container-bottom h4 {
  font-weight: 500;
  font-size : 16px ;
  text-align:center;
  color: #fff;
  margin-left : auto;
  margin-right : auto;
}

.linkbutton{
    border: 2px solid #fff;
    padding: 10px 50px; 
    width: 50px;
    border-radius: 30px;
    margin: auto;
    position: relative;
}
.container-bottom{
    background-color: #000;
    width: 300px;
    height:20%;
    padding: 25px;
    position: relative;
   margin-left: auto ;
  margin-right: auto ;
  margin-top:30px;

  }

单击以了解更多信息
身体{
背景：#fff；
}
.货柜底部h4{
字号：500；
字体大小：16px；
文本对齐：居中；
颜色：#fff；
左边距：自动；
右边距：自动；
}
.linkbutton{
边框：2倍实心#fff；
填充：10px 50px；
宽度：50px；
边界半径：30px；
保证金：自动；
位置：相对位置；
}
.货柜底部{
背景色：#000；
宽度：300px；
身高：20%；
填充：25px；
位置：相对位置；
左边距：自动；
右边距：自动；
边缘顶部：30px；
}

链接是内联的，因此

边距：自动不起作用

使用
文本对齐：居中

.container-bottom {
    . . . 
    text-align: center;
}

另一种方法是：

.linkbutton{
    /* You were missing this */
    display: block;
    /* Need this to align your text in the middle */
    text-align: center;
    border: 2px solid #fff;
    /* Controlling your padding here */
    padding: 10px;
    /* Specifying the width is important */
    width: 200px;
    border-radius: 30px;
    margin: auto;
    position: relative;
}

只需添加
文本对齐：居中到
。容器底部
，它也将链接居中