Center text vertically in card

ionic-v1
1

I want to center the text in my card vertical and horizontal. But it is just centered horizontal. What can I do?

index.html

  <div class="card">
  <div class="item item-divider">
      <h2><b>Joke {{jokeNo}}</b></h2>
   </div>
  <div class="item item-text-wrap">
 <h1>{{joke}}</h1>
  </div>
</div>

style.css

.card{
height: 30%;
margin-top:5%;
text-align:center;
vertical-align: middle;
margin-top: 50px;
}

2 
.card {
    height: 180px;
    margin-top: 50px;
    width: 100%;
    text-align: center;
}

.card .item-text-wrap {
    background: red;
    height: 80%;
    display: flex;
    align-items: center;
    justify-content: center;
}
3 Likes