html - 无法将文本居中对齐

This question already has answers here:

CSS center text (horizontally and vertically) inside a div block
                                
                                    （23个答案）
                                
                        
                        
                            Flexbox: center horizontally and vertically
                                
                                    （11个答案）
                                
                        
                        
                            How do I vertically center text with CSS? [duplicate]
                                
                                    （38个答案）
                                
                        
                        
                            How to center an element horizontally and vertically
                                
                                    （21个回答）
                                
                        
                                2年前关闭。
            
                    
我正在尝试将文本居中对齐（垂直和水平）：

  <div class="panel-small sport">
    <b>Sport and Activity</b>
  </div>

这是CSS：

.panel-small *
{
  text-align: center;
  vertical-align: middle;
}

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

文字甚至出现在顶部

最佳答案

尝试弹性定位：

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