下面是我的结构，以及这个结果：

ul#homeinfo #copy {
  list-style: none;
  position: absolute;
  top: 20px;
  right: 20px;
  margin: 0;
  line-height: 22px;
}

ul#homeinfo li {
  display: inline;
}

ul#homeinfo li a {
  color: white;
}

ul#homeinfo li:first-child a {
  border-right: 1px solid white;
  padding: 0 6px 0 3px;
}

ul#homeinfo li:nth-child(4) a {
  border-right: 1px solid white;
  padding: 0 6px 0 3px;
}

#footer-center {
  display: flex;
  justify-content: center;
  /* Centers horizontally */
  align-items: center;
  /* Centers vertically */
}

<ul id="homeinfo">
  <div>
    <li>
      <a href="https://en.wikipedia.org/wiki/Privacy_policy" target="_blank">Website Privacy Policy</a>
    </li>
    <li>
      <a href="https://en.wikipedia.org/wiki/Privacy_policy" target="_blank">Privacy Notice</a>
    </li>
  </div>
  <div>
    <li>
      <a href="https://tbd.gov/" target="_blank">Your Organization Home</a>
    </li>
    <li>
      <a href="https://www.tbd.gov/index.html" target="_blank">Another Org Name</a>
    </li>
  </div>
</ul>

我该如何让两列中的竖线彼此居中对齐？

解决方案

请使用 display:grid 搭配两列布局，然后按需要对文本进行对齐。

* {
  margin: 0;
  padding: 0;
  min-width: 0;
  min-height: 0;
  box-sizing: border-box;
}

::before,
::after {
  box-sizing: inherit;
}

li {
  padding: .25em;
  list-style-type: none;
  font-size: 1.5rem;
  text-wrap: balance;
}

a {
  text-decoration: none;
}

ul {
  border: 1px solid grey;
  display: inline-grid;
  grid-template-columns: auto auto;
  margin: 1em;
}

li:nth-child(odd) {
  text-align: right;
}

li:nth-child(even) a:before {
  content: "|";
  margin-right: .25em;

}

<ul id="homeinfo">
  <li><a href="https://en.wikipedia.org/wiki/Privacy_policy" target="_blank">Website Privacy Policy</a>
  </li>

  <li><a href="https://en.wikipedia.org/wiki/Privacy_policy" target="_blank">
        Privacy Notice</a>
  </li>
  <li><a href="https://tbd.gov/" target="_blank">
        Your Organization Home</a>
  </li>

  <li><a href="https://www.tbd.gov/index.html" target="_blank">
        Another Org Name</a>
  </li>
</ul>