移动端页面右侧字母布局

效果：

html:

<ul class="list">
    <li class="item">A</li>
    <li class="item">B</li>
    <li class="item">C</li>
    <li class="item">D</li>
    <li class="item">E</li>
    <li class="item">F</li>
    <li class="item">G</li>
  </ul>

css:

.list{
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: absolute;
    top: 1.58rem;
    right: 0;
    bottom: 0;
    width: .4rem;
}
  .list  .item{
      line-height: .4rem;
      color: blue;
      text-align: center;
}

其中：position: absolute;top: 1.58rem;right: 0;bottom: 0;width: .4rem;写字母表在右侧定位，

display: flex;flex-direction: column;justify-content: center;使字母表在定位后的布局内垂直居中