텍스트 중앙을 맞추려면 어떻게 해야할까요..?

<style>
.shapeWrap li p{height:50px; border-radius:25px; margin: 0 auto; font-weight: initial; line-height: initial; letter-spacing: initial; color: #fff;}
.shapeWrap li p b{font-size: 2rem; display: inline-block; line-height:50px;}
.shapeWrap li p span{font-size: 1rem; display: inline-block;}

.shapeWrap li p {
    background-color: #facc16;
    padding-right: 3rem;
    display: flex;
    justify-content: flex-end;
}
.Bg {
    display: flex;
    align-items: center;
}
</style>
<ul class="shapeWrap">
 <li>
   <h4>미세먼지(pm10)</h4>
       <p class="Bg"><b>27㎍/㎥</b> <span>매우<br/>나쁨</span></p>
  </li>
  <li>
     <h4>미세먼지(pm10)</h4>
         <p class="Bg"><b>27㎍/㎥</b> <span>나쁨</span></p>
 </li>
</ul>