Html 如何校正li框的高度并使其内的文本居中？CSS

如何修复框的不均匀高度并使其内部的文本完全居中？我仍在尝试了解css的一些基本知识

html代码

<div id="first_page_main">
      <ul>
        <li><a href="index.html">Login</a></li>
        <li><a href="index.html">Sign up</a></li>
        <li><a href="homepage.php">Continue as guest</a></li>
      </ul>

</div>

---

尝试在css中查找flexbox

#first_page_main{
    background-color: rgb(36, 4, 61);
    height: 250px;
    margin: 80px 0 0 0;
}

#first_page_main ul{
  position: relative;
  top:35%;
  list-style-type: none;
  padding:0;
  margin:0;
}

#first_page_main ul li{
  background-color: rgb(104, 119, 119);
  border: solid thin #999;
  height: 80px;
  width: 130px;
  margin: 0 20px 0 20px;
  padding: 5px;
    text-align: center;
  font-size: 28px;
  display: inline-block;

}

#first_page_main ul li a {
  text-decoration: none;
  color: rgb(255, 255, 255);
}

#first_page_main ul li:hover {
  font-weight: 600;
}

<div id="first_page_main">
      <ul style="display:flex; align-items-center;">
        <li><a href="index.html">Login</a></li>
        <li><a href="index.html">Sign up</a></li>
        <li><a href="homepage.php">Continue as guest</a></li>
      </ul>

</div>