不确定行数的多行文本垂直水平居中的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>
上一篇:css 单行/多行文字垂直居中问题


下一篇:详解vue生命周期