display:table-cell的应用

display:table-cell：指让标签元素以表格单元格的形式呈现，类似于td（ie8以上支持）

1、实现文字高度不固定的垂直居中

• 大小不固定，多行文字的垂直居中
  ① 单行文字，我们很多人都知道使用line-height，将line-height值与外部标签盒子的高度值设置成一致就可以了

单行文字居中显示测试，css样式为：height:3em; line-height:3em;……

② 多行文字(display: table-cell;)

• 大小不固定，图片的垂直居中
  html结构如下

<div class="zxx_align_box_2"><span class="zxx_align_word">这里显示多行文字。</span></div>

css代码如下

    .zxx_align_box_2 {
          display: table-cell;
            width: 500px;
            height: 10em;
            padding: 0 1em;
            border: 4px solid #beceeb;
            color: #069;
            vertical-align: middle;
        }
        
        .zxx_align_box_2 span.zxx_align_word {
                display: inline-block;
                font-size: 0.1em;
        }

实现效果如图

效果

2、实现图片高度不固定的垂直居中

① 透明gif图片+背景定位
使用一个透明的gif图片做覆盖层，高宽拉伸至所需要的大小，然后给这个gif图片一个background-position:center center的属性

html+css

<style type="text/css">
            .fix{
                zoom: 1;
            }
            ul, ol, form, h1, h2, h3, h4, h5, h6, p {
                padding: 0;
                margin: 0;
                list-style-type: none;
            }
            .zxx_align_box_3 li {
                width: 10em;
                height: 10em;
                padding: 1em;
                margin: 0 1em 0 0;
                font-size: 1em;
                float: left;
                border: 1px solid #beceeb;
            }
            .fix:after, .fix:before {
                display: table;
                content: "";
                clear: both;
            }
            .zxx_align_box_3 li img {
                display: block;
                width: 100%;
                height: 100%;
                background-repeat: no-repeat;
                background-position: center;
            }
        </style>
<ul class="zxx_align_box_3 fix">
            <li>
                <img src="images/pixel.gif" style="background-image:url(images/mm1.jpg);" />
            </li>
             <li>
                <img src="images/pixel.gif" style="background-image:url(images/mm2.jpg);" />
            </li>
             <li>
                <img src="images/pixel.gif" style="background-image:url(images/mm3.jpg);" />
            </li>
        </ul>

② display:table-cell和文字大小控制居中

<div style="width: 140px;height: 140px;display: table-cell;text-align:center;border:1px solid #beceeb;">
    <img src="images/mm2.jpg" style="vertical-align: middle;"/>
</div>

③ 使用空白图片实现垂直对齐
将要显示的图片与一张透明的高度100%，宽度1像素的透明图片vertical-align:middle对齐。

          <style type="text/css">
            .fix {
                zoom: 1;
            }
            
            ul,ol,form,h1,h2,h3,h4,h5,h6,p {
                padding: 0;
                margin: 0;
                list-style-type: none;
            }
            
            .fix:after,
            .fix:before {
                display: table;
                content: "";
                clear: both;
            }
            
            .zxx_align_box_6 li {
                height: 128px;
                width: 150px;
                padding: 13px 0;
                float: left;
                margin-right: 10px;
                border: 1px solid #beceeb;
                text-align: center;
                font-size: 0;
            }
            
            .zxx_align_box_6 li .alpha_img {
                height: 100%;
                width: 1px;
                vertical-align: middle;
            }
            
            .zxx_align_box_6 li .show_img {
                vertical-align: middle;
            }
        </style>
            <ul class="zxx_align_box_6 fix">
            <li>
                <img class="show_img" src="images/mm1.jpg" />
                <img class="alpha_img" src="images/pixel.gif" />
            </li>
            <li>
                <img class="show_img" src="images/mm2.jpg" />
                <img class="alpha_img" src="images/pixel.gif" />
            </li>
            <li>
                <img class="show_img" src="images/mm3.jpg" />
                <img class="alpha_img" src="images/pixel.gif" />
            </li>
        </ul>

2、实现两栏自适应布局

    <style type="text/css">
            .l {
                float: left;
                }
            .mr10{
                    margin-right: 10px;
                }
            .box {
                width: 60%;
                margin: 60px auto 0;
                padding: 20px;
                background: #f5f5f5;
            }
            
            .content {
                display: table-cell;
            }
        </style>
<div class="box f9 fix">
            <a href="#prettyGirl" class="l mr10"><img border="0" src="images/mm2.jpg" /></a>
            <div class="content">
                哈哈哈哈哈哈哈哈哈哈哈
            </div>
        </div>

实现效果图

20180807140220.png

3、实现等高布局

      <style type="text/css">
            .list_row {
                display: table-row;
                overflow: hidden;
            }
            
            .list_cell {
                display: table-cell;
                width: 30%;
                padding: 10px;
                background-color: #f5f5f5;
            }
            
            .list_center {
                background-color: #f0f3f9;
            }
        </style>
        <div class="list_row">
            <div class="list_cell">你一定也有过这种感觉的。...罗兰《寂寞的感觉》</div>
            <div class="list_cell list_center">作为一个被基阿异捅过...水，四积阴功五读书。</div>
            <div class="list_cell">奔波了一...永远幸福快乐！</div>
          </div>

效果图

20180807143653.png

4、display:table-cell实现的表格布局，类似于table

• display:table=>相当于“table”标签；

• display:table-row=>相当于“tr”标签；

• display:table-cell=>相当于“td”标签；
  还有其他属性

  
  20180807145945.png