垂直和水平对齐锚点元素，父元素可点击区域的100％

Question

在将锚点的可单击区域设置为父元素的宽度和高度的100％的同时，如何将锚标记在父块或内联块级元素（div或按钮）内垂直和水平居中？

我已经使用flexbox达到了预期的目标，但是，我想知道如何使用flexbox或网格来做到这一点。 以下是使用flexbox的效果示例。

 .medium-button { border: none; border-radius: 4px; color: #3a66db; padding: 0; } .medium-button__link { display: flex; justify-content: center; align-items: center; width: 160px; height: 48px; } 

 <button class="medium-button"> <a class="medium-button__link"> Clickable link </a> </button> 

Answer 1

解决了这个问题，这要归功于@insertusername， <button/>内的<a/>不是有效的HTML。 这有助于将标记简化为看起来像并像按钮一样交互的锚标记，而不是嵌套元素。

->只需将锚标记设置为块级元素，即可指定宽度和高度，然后使用line-height。

 .medium-button__link { display: block; width: 200px; height: 48px; text-align: center; line-height: 48px; background: #3a66db; color: #fff; font-family: 'OpenSans-Regular'; font-size: 1em; border-radius: 4px; text-decoration: none; } 

 <a class="medium-button__link" href="https://sirthisisawendys.com"> Clickable link </a> 

Answer 2

不使用flex属性，就可以实现垂直和水平对齐锚元素。 实际上，每当您指定元素的高度时，都必须在该元素上赋予相同的LINE-HEIGHT 。 line-height属性指定线的高度。 因此，您必须在medium-button__link div上使用相同的行高。

Answer 3

您可以使用<a>标记上的显示表格， width:100%和height:100%然后为span子项添加： display: table-cell和vertical-align: middle

 .medium-button { border: none; border-radius: 4px; color: #3a66db; width: 160px; height: 48px; padding: 0; } .medium-button__link { width:100%; height:100%; display:table; text-align:bottom; } span{ display: table-cell; vertical-align: middle; } 

 <button class="medium-button"> <a class="medium-button__link"> <span>Clickable link</span> </a> </button>