Q:

Cannot align text to center

I'm trying to align text to center (vertically and horizontally):
  <div class="panel-small sport">
    <b>Sport and Activity</b>
  </div>

this is the css:
.panel-small *
{
  text-align: center;
  vertical-align: middle;
}

.sport
{
  background-image: url("../img/sport.png");
 left: 248px;
}

the text appear even on top

A:

Try flex positioning: 
display: flex;
justify-content: center;
align-items: center;

