div { height:30px; line-height:30px; width:100px; overflow:hidden; }
.center-vertical{ position: relative; top:50%; transform:translateY(-50%); }
transform在嵌套中可能50%取值为非预期,而导致不居中。
.wrapper{ display: table; }
.cell { display: table-cell; vertical-align: middle; }
html结构如下:
<div class="wrapper"> <div class="cell"> <div class="title-text">第一行内容</div> <div class="text-sm">第二行内容</div> </div> </div>