父元素規定行高line-height和高度height；子元素使用display:inline-block、vertical-align: middle;

html文件：

<div class="k-mess k-mess-zhai" style="display: block"><div class="k-left"><p>王圖王宇</p><p>王圖王宇</p><p>王圖王宇</p></div><div class="k-right"><p><span>臥鋪</span><span>12車1024上</span></p><p><span>臥鋪</span><span>12車1024上</span></p><p><span>臥鋪</span><span>12車1024上</span></p></div> </div>

對應的css為：

.k-mess{float: left;margin-top: 5px;padding-top: 5px;width: 248px;height: 70px;line-height: 70px;margin-left: 60px;background:url('./i/train_bg.png') no-repeat;.k-left{width: 98px;display: inline-block;vertical-align: middle;text-align: center;p{height: 20px;line-height: 20px;}}.k-right{width:140px;display: inline-block;vertical-align: middle;text-align: center;p{height: 20px;line-height: 20px;}}}

?

轉載于:https://www.cnblogs.com/xiaozhumaopao/p/6092451.html

總結

以上是生活随笔為你收集整理的令子元素垂直居中（并且子元素的高度不固定）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。