未知高度垂直居中

以前遇到过这样的问题、记得最后没能很好的处理他。最近在一些项目群里发现了这样的两个方法特别收集起来分享给大家。

 

 

 

方法一：

使用绝对定位来处理，吧内部元素转换为表格的形式，display:table; 具体方法如下：

运行代码编辑代码查看源代码

资源添加向导

01.<style type="text/css">

02.    * { padding:0; margin:0;}

03.    ul.ul1 { list-style:none; margin:100px auto; 500px;}

04.   .ul1 li { 100px; height:200px; float:left; margin-right:10px; border:1px solid #000;display:table; *display:block; zoom:1;}

05.   .ul1 li span {display:table-cell; vertical-align:middle; *position:relative; top:50%;*display:block; 100% ; text-align:center;}

06.   .ul1 li span strong {margin:0 auto; *position:relative; top:-50%; display:block;}

07.</style>

08.<ul class="ul1">

09.    <li><span><strong>Surprise double take Surprise double take</strong></span></li>

10.    <li><span><strong>Surpr <br />Surprise double </strong></span></li>

11.    <li><span><strong>take</strong></span></li>

12.</ul>

 

 

方法二：

一个很神奇的方法、非常简单，主要是多了一个100%高度的空元素。

 

运行代码编辑代码查看源代码

资源添加向导

01.<style>

02.*{ padding:0; margin:0;}

03..ul2 {height: 100%;overflow: hidden; 100%;list-style:none;}    

04..ul2 li{height:100px;line-height:20px;float: left; 200px;background-color: #ddd;margin: 5px;text-align: center;}

05..ul2 li .txt,.ul2 li span{display:inline-block; *display:inline; *zoom:1; vertical-align: middle;}

06..ul2 li span{height:100%;}

07.</style>

08.<ul class=" ul2">

09.    <li>

10.      <div class=txt><img src="" alt="" width="50" height="50" /></div>

11.      <span></span>

12.    </li>

13.    <li>

14.  <div class=txt>文字文字文<br />字文字文字</div>

15.  <span></span>

16.</li>

17.<li>

18.  <div class=txt>文字文字文字文字文字</div>

19.  <span></span>

20.</li>

21.<li>

22.  <div class=txt>文字文字文<br />字文字文字</div>

23.  <span></span>

24.</li>