更简单的方式来移动我的文本，以确保它位于框的中央？

Question

我正在尝试根据我在高中和Google中学到的知识来建立一个网站。

我想在页面的左右移动一些边框（我可以这样做），但是其中的文本不是（或看起来）以边框轮廓为中心。我通过为文本或链接创建一个[ID为ID的div]并将其移动到框的中间来解决此问题，但是我脑海中隐隐地告诉我：“如果有人不使用Google chrome，则可能不会也可以居中或放置在随机位置，如果我们需要移动它，则必须全部这样做。”

所以我的问题是：移动文本以确保其与框居中比较容易的方法是什么？当我刚移动它或添加填充时，它使链接中的文本推到一起，看起来很难看。

这是我的代码：

html {
  background-color: #070738;
  text-align: center;
}

h1,
h2,
h3,
p,
li,
ul,
ol {
  color: #ffffff;
  text-decoration: none;
  list-style: none;
}

a {
  color: #ffffff;
}

#page-container {
  position: relative;
  min-height: 70vh;
}

#content-wrap {
  padding-bottom: 2.5rem;
  /* Footer height */
}

#footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 2.5rem;
  /* Footer height */
}

.border {
  border: 1px solid green;
  width: auto;
  position: fixed;
  top: 80px;
  left: 43%;
  right: 40%;
  height: 200px;
  width: 200px;
}

#list {
  position: fixed;
  top: 90px;
  left: 44%;
}

<div id="content-wrap">
  <h1>Aries Tarot</h1>
  <div class="border">
    <div id="list">
      <ul>
        <li><a href="whoami.html">Who Am I</a></li>
        <br><br>
        <li><a href="witarot.html">What Is Tarot</a></li>
        <br><br>
        <li><a href="info.html">Information</a></li>
      </ul>
    </div>
  </div>

[如果有人可以帮助我清理此ID，那就太好了

Answer 1

你去了

body {
  background-color: #070738;
}

#content-wrap {
    width: 50%;
    margin: auto;
    text-align: center;
}

li {
    list-style-type: none;
}

<div id="content-wrap">
  <h1>Aries Tarot</h1>
      <ul>
        <li><a href="whoami.html">Who Am I</a></li><br>
        <li><a href="witarot.html">What Is Tarot</a></li><br>
        <li><a href="info.html">Information</a></li>
      </ul>
</div>