如何在图像横幅内垂直和水平居中链接按钮

【问题标题】：How to center link button vertically and horizontally inside image banner如何在图像横幅内垂直和水平居中链接按钮
【发布时间】：2018-08-29 18:17:37
【问题描述】：

我需要在横幅内正确居中图像。水平和垂直居中。

这是我制作的 jsfiddle。按钮的中心必须在垂直红线之间，并且垂直居中。

JsFiddle

  <table  width="100%"  border="0px" style="background:transparent">
   <tr>
    <td height="305px">
   <div style="text-align:center;">
    <a href="#" class="botonConocer"  >Conocer más</a>
    </div>
    <img src="img/Grass.jpg" style="width:100%;height:305px" class="img-responsive" />



    </td>
    </tr>
        </table>

【问题讨论】：

修复你的 jsfiddle 链接

标签： html css alignment center

【解决方案1】：

如果你的按钮已经在css中绝对定位，你可以添加这个样式让它显示在中间

.botonConocer {
    top: 50%;
    left: 50%;
    margin: -28px 0 0 -82px;
}

在边距中，您将其设置为负数，等于您的高度的一半和您的宽度的一半，然后它将显示在中间与其相对的位置，所以如果您想让它出现在容器的中间，你应该把它添加到你的容器中

.container {position: relative}

这是JSFIDDLE中的结果

【讨论】：

如果我增加按钮文本，这个解决方案将不起作用。
好吧，如果您已经知道按钮的宽度和高度并且它的高度和宽度是固定的，则使用此解决方案。您应该在其中编辑宽度和高度为负一半的边距。