如何垂直对齐<p>和<div>，将它们放置在没有表格单元格属性的情况下

我想定位文本，使其与ch-grid <div>（该圆圈为彩色的东西）在垂直方向上居中对齐。

是否可以在不提供<p>任何显示属性的情况下制作它，因为当我放置它时，我会给出它，display:none以便我可以淡出它并稍后再做。

抱歉，但是我尝试了很多事情，但对我来说却无济于事。非常感谢。
这是我的代码：

<div class="container">
<div class="row">
    <div class="col-xs-12 col-md-3 col-md-push-6"> 
    <div class="ch-grid">
           <p>Who are we?</p>            
         <div class="ch-item ch-img-1">
             <div class="ch-info ch-info-1">
               <i class="fa fa-user fa-5x" aria-hidden="true"></i>
             </div>
         </div>
      </div>    
   </div>
</div>
</div>

和CSS：

body{
padding-top: 100px; 
height: 100%;
font-family: helvetica, sans-serif, verdana;
}

.ch-grid {
position: relative;
text-align: center;
margin-bottom: 5vh;
width:400px;
height: 100px;
display: inline-block;
vertical-align: middle;
}

.ch-grid:after,
.ch-item:before {
  content: '';
  display: table;
}

.ch-grid:after {
  clear: both;
 }

.ch-item {
 width: 100px;
 height: 100px;
 border-radius: 50%;
 position: absolute;
 margin-left: 200px;
 overflow: hidden;
 cursor: default;
 box-shadow: 
    inset 0 0 0 16px rgba(255,255,255,0.6),
    0 1px 2px rgba(0,0,0,0.1);
 transition: all 0.4s ease-in-out;
 }

p {
 width: 100px;
 vertical-align: middle;
}
 .ch-img-1 { 
 background-image: url("http://res.cloudinary.com/dhcrccc1b/image/upload /c_scale,h_100,q_46,w_100/v1479836467/Bike%20page/Free-HD-artisticwallpaper4.jpg");
}   

.ch-info {

background: rgba(218, 173, 77, 0.8);
width: inherit;
height: inherit;
border-radius: 50%;
overflow: hidden;
opacity: 0;
transition: all 0.4s ease-in-out;
transform: scale(0);
 }

.ch-info-2{
 background: rgba(157, 151, 138, 0.8);
 }

 .ch-info-3{
 background: rgba(126, 154, 220, 0.8);
 }

 .ch-info-4{
background: rgba(76, 166, 37, 0.8);
  }

.ch-info i {
margin-top: 15px;
color: white;
}

.ch-item:hover {
box-shadow: 
    inset 0 0 0 1px rgba(255,255,255,0.1),
    0 1px 2px rgba(0,0,0,0.1);
}

.ch-item:hover .ch-info {
transform: scale(1);
opacity: 1;
}

https://jsfiddle.net/Chainervk/qg7en3cs/