複数行のテキスト未知の高さを垂直方向に中央に配置-

    
    


 

  

            -by               -by               -by   

  

*{margin:0;padding:0;}

.box{
  height:200px;
  width:300px;
  background:pink;
  margin:30px auto;
}
.box:before{
  content: '        ';
  display: inline-block;
  vertical-align: middle;
  width: 1em;
  height: 100%;
  background:lightblue;
}
.text{
  display: inline-block;
  font-size:16px;
  vertical-align: middle;/*          */
}