前端 - 如何實現自適應的多行文字垂直居中？

問題描述

demo在這https://jsfiddle.net/f2m02kz2/文字外圍的背景必須是正方形，使用table-cell的話就變成長方形？文字在不同屏幕下變化，而且要在不同的屏幕下居中？不知該如何實現？

問題解答

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

<p class='search_box'> <a href='http://www.wxshucaidpc.com/wenda/6004.html' > <p class='pp'>搜索<br />問題</p> </a></p>

.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;}回答2：

建議使用多個p標簽來代替，多行文字的垂直居中可以試試vertical

可以看一下flex