html - How to vertically position some text at the centre of a circle div? -

this question has answer here:

• css center text (horizontally , vertically) inside div block 19 answers

i'm trying make circle shaped div text directly in middle. can horizontally in middle, having loads of trouble getting in vertical center, i've tried doing vertical-align, padding, display etc it'll stay right @ top.

here's offending html:

<div class="widget">     <p id='case'>{27 cases}</p> </div> 

and here's css div:

.widget {     background-color: #ff1122;     color: yellow;     width: 150px;     height: 150px;     border-radius: 100%;     text-align: center;     font-size: 24px;     vertical-align: middle; } 

i'm trying text precisely in middle of circle vertically. how can this?

display: table-cell; vertical-align: middle; 

then make circle display: table;

.widget {      background-color: #ff1122;      color: yellow;      width: 150px;      height: 150px;      border-radius: 100%;      text-align: center;      font-size: 24px;      vertical-align: middle;      display:table;      line-height:150px;  }  p {      display: table-cell;      vertical-align: middle;  }

<div class="widget">      <p id='case'>{27 cases}</p>  </div>