前端 - 如何实现自适应的多行文字垂直居中？

Question

demo在这https://jsfiddle.net/f2m02kz2/文字外围的背景必须是正方形，使用table-cell的话就变成长方形？文字在不同屏幕下变化，而且要在不同的屏幕下居中？不知该如何实现？

迷茫 · Answer

1.使用css3的box、flex布局
2.使用table-cell，

.search_box{
  width:100%;
  display:table;
  height: 200px;
}
.search_box>a{
  display:table-cell;
  background: red;
  height:0;
  text-align:center;
  font-size:1.5rem;
  text-decoration: none;
  vertical-align: middle;
}
.pp {
  vertical-align: middle;
  padding: 0;
  margin: 0 auto;
  background: blue;
  width: 25%;
  color: #fff;
}

迷茫 · Answer

建议使用多个p标签来代替
，多行文字的垂直居中可以试试vertical

阿神 · Answer

可以看一下flex