在HTML中选择时，如何自动将元素浮动到DIV的中心

Question

1. 我做了垂直滚动视图。在ul li中使用div。我已经为div指定了固定高度，因此只有3 li可见。我想在点击时将选中的li置于中心位置 例如。如果我点击3，它应该滚动到中心。

2. 当li离开scrollview时，我想改变它的颜色 恩。当li 1移动到scrollview之外时滚动它应该改变它的颜色

有没有办法在HTML / CSS中做到这一点？



＆＃13;
＆＃13;
$container-background: #0F1012;
$subitem-color:orange;
.container {
  width: 100%;
  background-color: $container-background;
  position: fixed;
  padding: 20px;
}

.addMargin {
  margin-left: 60px;
}

.item {
  width: 100%;
  overflow-y: auto;
  height: 100vh;
  z-index: 5;
  position: relative;
  height: 200px
}

.sub-item {
  background-color: $subitem-color;
  width: 100%;
  margin-bottom: 10px;
  z-index: 10;
  position: relative;
  font-size: 30px;
  text-align: center;
  padding: 14px 16px;
}

body {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.features {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

.sub-item span {
  font-size: 10px;
}

.sub-item:hover {
  background-color: #d0cdcd;
  font-size: 40px;
}
＆＃13;
<div class="container">
  <div class="item">
    <ul class="features">
      <li class="sub-item">&#8364 20 <span>+10% Belwarde</span></li>
      <li class="sub-item">&#8364 20 <span>+10% Belwarde</span></li>
      <li class="sub-item">&#8364 20 <span>+10% Belwarde</span></li>
      <li class="sub-item">&#8364 20 <span>+10% Belwarde</span></li>
      <li class="sub-item">&#8364 20 <span>+10% Belwarde</span></li>
    </ul>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;