不确定行数的多行文本垂直水平居中的css
ul li { position:relative; display: table; width:3rem; height:3rem; background:url('image/defaultBg.jpg') 0 0/100% 100% no-repeat; float:left; margin-bottom:0.2rem; text-align:center; box-shadow: 0 0 0.2rem #888; transition: all 0.3s linear; transform-origin: 0 0; transform-style: preserve-3d; color:#b21e23; font-weight:bold;font-size: 18px; border:1px solid #b21e23; overflow: hidden; } li .selects_item{ position:absolute; top:50%; left:50%; display:table-cell; vertical-align:middle; height:1.3rem; } lit .selects_item p{ position:relative; top:-50%; left:-50%; width:3rem; margin:0 auto; }
<div> <ul> <li> <div class="selects_item"> <p>我是多行文本</p> <p>我不确定行数,单行或多行</p> </div> </li> </ul> </div>