title: Unable to vertically centre text even after trying various methods
body: <p>I am trying to centre text (a Link) inside of a div. I am capable of getting it to centre horizontally, but not vertically. I have tried many methods and the vertical position of the text never changes. Padding-top and other similar methods just increase the white box size, and don't effect the text.</p>
  <p><a href="https://i.stack.imgur.com/TJ0MC.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/TJ0MC.png" alt="enter image description here" /></a></p>
  <pre><code>HTML
  ----------
  &lt;div className={styles.buttonBorder}&gt;
    &lt;Link to={`/event/${id}`} className={styles.link}&gt;Details&lt;/Link&gt;
  &lt;/div&gt;
  
  CSS
  ----------
  .buttonBorder {
    display: flex;
    align-items: center;
    height: 50px;
    border: 10px solid;
    border-image-slice: 1;
    border-width: 5px;
    border-image-source: linear-gradient(
      90deg,
      rgba(148, 88, 199, 1) 0%,
      rgba(92, 62, 183, 1) 100%
    );
    background: linear-gradient(
      90deg,
      rgba(148, 88, 199, 1) 0%,
      rgba(92, 62, 183, 1) 100%
    );
  }
  
  .link,
  .link:visited,
  link:link,
  link:active {
    background: white;
    text-decoration: none;
    color: black;
    text-align: center;
    font-size: 18pt;
    border: 0;
    width: 150px;
    height: 50px;
    cursor: pointer;
    transition-duration: 0.4s;
    border: 1px solid black;
  }
  
  .link:hover {
    background: transparent;
    text-decoration: none;
    color: white;
    cursor: pointer;
  }
  </code></pre>