Vertically align text in only one flex item in bootstrap-CodePudding

I have a basic card, divided into 3 sections:

<div class="card" style="width: 350px; height: 250px;">
  <div class="card-body">
    <div class="d-flex flex-column" style="height: 100%;">
      <div class="p-2" style="height: 30%">1</div>
      <div class="p-2" style="height: 50%;">2</div>
      <div class="p-2" style="height: 20%;">3</div>
    </div>
  </div>
</div>

Now, I want to make sure the text is vertically aligned to the middle for the second section, without applying that to the other 2 sections. I was looking at align-items-center and align-self-center, but I'm struggling getting this right... Any help is much appreciated!

Update: fiddle is here.

CodePudding user response：

You can use this class d-flex align-items-center into your second div p-2

.p-2{border:1px solid red;}

If you want also horizontal centering add also `justify-content-center`
Here is the [docs][1]

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="card" style="width: 350px; height: 250px;">
  <div class="card-body">
    <div class="d-flex flex-column" style="height: 100%;">
      <div class="p-2" style="height: 30%">1</div>
      <div class="p-2 d-flex align-items-center" style="height: 50%;">2</div>
      <div class="p-2" style="height: 20%;">3</div>
    </div>
  </div>
</div>