css:table-cell妙计(divimgsrc='Timg.jpg'/divdiv ) width:200px； height:200px； display :表蜂窝； 垂直对准：米； 文本对齐3360中心； border :1 px固态服务器； }效果图：
二、自动平均拆分元素ulli1/Lili2/Lili3/Lili4/Lili5/Li/ul/*父元素定义为“display:table”，子元素定义为“display:table-cell” margin:0； } ul{ list-style-type: none； 显示：表； /*注意是table，不是table-row*/width:300px。 } li{ display:table-cell； height:30px； line-height:30px； 文本对齐3360中心； /*水平垂直居中文本*/color:white； }ulLi:nth-child(1) { background:red； }ulLi:nth-child(2) { background:orange； }ulLi:nth-child(3) {后台： blue； }ulLi:nth-child(4) { background:green； }ulLi:nth-child(5) { background:purple； }效果图：
三、自适应等高布局example1:图片和文字自适应等高布局
divid=' wrapper ' divid=' img-box ' img src=' book.jpg '/div divid=' text-box ' p 《偷书贼》是澳大利亚著名作家粗暴的蜻蜓长篇小说代表作弟弟不幸在火车上去世了。 在埋葬弟弟的荒原上，lqdym捡到了对她来说有意义的书《解忧杂货店》。 /p p来到慕尼黑贫民区的寄养家庭，lqdym晚上抱着《追风筝的人》入睡。 秀丽的气氛是为了安慰她，每天晚上朗读手册的内容，教她怎么读。 /p plqdym发现比食物更难抵挡书的诱惑，不由得开始偷书。 书中的世界帮助她度过了现实的苦难，她也开始为躲在地下室的犹太人和在防空洞避难的邻居读书，安慰不安的心。 但是无情的战火终于摧毁了这一切……/p/div/div # wrapper { display 3360 table-row； } # img-box { display : table-cell； border :1 px固态服务器； 垂直对准：米； 文本对齐3360中心； width:200px； (img-boximg ) width:100px； } #
text-box{ display:table-cell; width:500px; border:1px solid silver; } #text-box p{ text-indent:2em; }效果图：
ps:左右两个盒子我们都没有加上高度，而是由盒子内容撑开。因为同一行的单元格 td 元素高度是相等的，所以左右两个盒子高度相等，并且高度由两者高度最大值决定。这就是自 适应的等高布局。
example2:图片链接与文字的对齐
当在<a></a>标签中加入<img>标签时，可以实现点击图片进入某个链接，对用户十分友好，但由于<a></a>标签本身和图片大小不一致，因此想要在图片附近加入相应的文字对齐居中，常常达不到想要的效果。如:
<a rel="external nofollow" href="#"> <img src="book.jpg"/> </a> <span>作者： [澳]潇洒的鸭子</span> img{ height:100px; } a{ vertical-align: middle; }我们希望文字在图片右边中部,用vertical-align:middle没能达到我们想要的效果。这时，我们可以使用table-cell。
<div id="wrapper"> <a id="link" rel="external nofollow" href="https://book.douban.com/subject/30225784/?icn=index-editionrecommend"> <img src="book.jpg" id="img-link"/> </a> <div id="link-txt"> 作者： [澳]潇洒的鸭子 </div> </div> #img-link{ width:100px; } #wrapper{ display:table-row; } #link{ display:table-cell; text-align:center; vertical-align: middle; } #link-txt{ display:table-cell; vertical-align: middle; padding-left:20px; font-size:0.8em; }效果图：
example3:动态评论的两栏布局
<div id="wrapper"> <div id="master-img"> <img src="timg2.jpg" class="head-portrait"/> </div> <div id="master-content"> <p id="author"> <span class="light-txt">孤独的根号三</span> </p> <p id="sentence"> 如果下一秒的我已经不是上一秒的我，那么我......还是我吗？ </p> <p id="info"> 评论(2)-转载-赞-浏览-<span class="light-txt">5月9日12:13</span> </p> <div class="observer-wrapper"> <div class="observer-img"> <img src="timg3.jpg" class="head-portrait"/> </div> <div class="observer-text"> <p><span class="light-txt">binbing:</span><span>那我还是你爸爸吗</span></p> <p><span class="light-txt">5月9日12:20</span></p> </div> </div> <div class="observer-wrapper"> <div class="observer-img"> <img src="timg4.jpg" class="head-portrait"/> </div> <div class="observer-text"> <p><span class="light-txt">大人：</span><span>你还是我儿子 这个不会变</span></p> <p><span class="light-txt">5月9日13:20</span></p> </div> </div> </div> </div> *{ padding:0; margin:0; } .head-portrait{ width:40px; height:40px; border-radius:20px; } #wrapper{ display:table-row; } #master-img{ display:table-cell; text-align:center; vertical-align: top; padding-right:10px; } #master-content{ display:table-cell; vertical-align: top; } #author{ padding-bottom:10px; } #sentence{ padding-bottom:10px; } #info{ padding-bottom:20px; } .light-txt{ color:slategray; } .observer-wrapper{ display:table-row; } .observer-img{ display:table-cell; text-align:center; vertical-align: top; padding-right:10px; padding-bottom:10px; } .observer-text{ display:table-cell; vertical-align: top; padding-bottom:10px; }效果截图：
四、总结：table-cell的妙用：
1.垂直居中2.自适应等高布局3.自动平均划分元素