移动端页面右侧字母布局

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;使字母表在定位后的布局内垂直居中