如何在sidebar侧边栏放置字母 解决文本居中及顶部留白问题

问题1 如何让绿色框内的文本同时实现垂直和水平方向的居中？ #

给列表容器开启flex布局即可实现双向居中，需要修改的样式如下：

1. 给.sidebar补充align-items: center属性，让列表容器本身先在侧边栏中垂直居中
2. 给.sidebar ul补充以下样式：

.sidebar ul {
  /* 清除浏览器默认边距 */
  margin: 0;
  padding: 0;
  background-color: green;
  /* 开启flex布局 */
  display: flex;
  /* 子元素纵向排列 */
  flex-direction: column;
  /* 占满父容器高度 */
  height: 100%;
  /* 纵向内容居中 */
  justify-content: center;
  /* 横向内容居中 */
  align-items: center;
}

如果需要红色的a标签占满绿色容器的横向宽度，把align-items: center替换为align-items: stretch即可，原有a标签的text-align: center已经可以保证文字水平居中。

问题2 绿色框的顶部为什么会出现空白间距？ #

这是浏览器的默认样式导致的：所有主流浏览器都会给<ul>、<ol>这类列表元素默认添加上下1em的外边距、左侧40px的内边距，你看到的顶部空白就是默认的margin-top造成的，只要在.sidebar ul的样式中添加margin: 0清除默认边距即可解决。

完整修改后代码 #

CSS代码

.sidebar {
  display: grid;
  background-color: royalblue;
  height: 100%;
  width: 160px;
  position: fixed;
  justify-content: center;
  /* 新增：子元素垂直居中 */
  align-items: center;
}

.sidebar ul {
  background-color: green;
  /* 新增：清除默认边距 */
  margin: 0;
  padding: 0;
  /* 新增：flex布局 */
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: center;
  align-items: center;
}

.sidebar a {
  text-decoration: none;
  color: black;
  background-color: red;
  display: block;
  text-align: center;
  padding: 8px 12px;
  font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}

HTML代码（补充语义化优化，ul直接子元素改为li）

<aside class="sidebar">
  <ul>
    <li><a href="#">a</a></li>
    <li><a href="#">b</a></li>
    <li><a href="#">c</a></li>
  </ul>
</aside>

内容的提问来源于stack exchange，提问作者Sid