如何在中间(垂直)对齐文本

我现在正在努力这么多个小时,但我仍然无法找到解决方案.我做了这个漂亮的网格,可以调整文本长度和浏览器调整.现在的问题是我无法将文本放在框中间.

我已经尝试了一切..我使用了几个属性来实现这一点,但没有任何效果.

text-align: center;
vertical-align: middle;
line-height: "same as div";

css代码:

.parent {
  text-align:center;
  margin:0px;
  width:100%;
  padding:0px;
  font-size:18px;
  color:#000;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
      justify-content: space-between;
}

.child {
  padding:18px 25px;
  background: rgba(0, 0, 0, .5);
  list-style-type:none;
  width:inherit;
  margin:5px;

}

小智.. 5

这是你想要的吗？

.parent {
    text-align:center;
    margin:0px;
    width:100%;
    padding:0px;
    font-size:18px;
    color:#000;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    vertical-align: middle;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;

}

.child {
    position: relative;
    background: rgba(0, 0, 0, .5);
    padding:10px;
    list-style-type:none;
    width:inherit;
    align-items: center;
    justify-content: center;
    height:inherit;
    display: inline-flex;
    vertical-align: middle;
    margin:5px;
}

    
    
    



    
sometext
    
somemoretext somemoretext
    
sometext
    
sometext


    
somemoretext somemoretext somemoretext somemoretext
    
sometext

.parent {
    text-align:center;
    margin:0px;
    width:100%;
    padding:0px;
    font-size:18px;
    color:#000;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    vertical-align: middle;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;

}

.child {
    position: relative;
    background: rgba(0, 0, 0, .5);
    padding:10px;
    list-style-type:none;
    width:inherit;
    align-items: center;
    justify-content: center;
    height:inherit;
    display: inline-flex;
    vertical-align: middle;
    margin:5px;
}

    
    
    



    
sometext
    
somemoretext somemoretext
    
sometext
    
sometext


    
somemoretext somemoretext somemoretext somemoretext
    
sometext