Html 如何让我的有序列表编号在边框中间居中

我试图创建一个编号的订单列表，周围有一个边框(画一个圆圈).我希望列表的编号在边框框中居中，边框框在段落中居中.现在，两个项目都在顶部居中(数字居中于边框框顶部，边框框居中于段落顶部).我想让边框框(圆圈)根据段落大小进行调整.因此，如果我的段落占了三行，那么圆圈将位于这三行的中间.如果它占据了5行，那么圆圈将出现在这5行的中间.

HTML

  <ol>
    <li>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat
    </li>
    <li>
     Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </li>
    <li>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat
    </li>
    <li>
     Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </li> 
  </ol>

CSS

li{
margin-top: 20px;
margin-right: 30%;
font-size: 20px;
}

ol {
    counter-reset:li; /* Initiate a counter */
    margin-left:0; /* Remove the default left margin */
    padding-left:0; /* Remove the default left padding */
}

ol > li {
    position:relative; /* Create a positioning context */
    margin:0 30% 20px 4.5em; /* Give each list item a left margin to make room for the numbers */
    padding:4px 8px; /* Add some spacing around the content */
    list-style:none; /* Disable the normal item numbering */
}

ol > li:before {
    content:counter(li); /* Use the counter as content */
    counter-increment:li; /* Increment the counter by 1 */
    /* Position and style the number */
    position:absolute;
    top: 0px;
    left:-2.5em;
    margin-right:8px;
    padding:4px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
    color:#fff;
    background:blue;
    font-weight:bold;
    font-family:"Helvetica Neue", Arial, sans-serif;
    text-align: center;
}