移动文本以确保它与框居中更简单的方法?

Question

我正在尝试根据我在高中和谷歌上学到的东西制作一个网站。

我想将一些边框移动到页面的右侧和左侧(我可以这样做(，但其中的文本没有(或看起来(与边框轮廓居中。我通过为文本或链接制作一个带有 id 的div并将它们移动到框的中间来修复它，但随后我脑海中的某些东西告诉我："如果有人不使用谷歌浏览器，它可能不会居中或在随机位置，如果我们需要移动它，我们必须重新执行此操作"。

所以我的问题是：移动文本以确保它与框居中有什么更简单的方法？
当我只是移动它或添加填充时，它使链接中的文本推在一起并且看起来很丑。

这是我的代码：

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>

如果有人能帮我清理这个，我真是太好了

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>