http://www.cnblogs.com/lee90/p/6602478.html


html:

1
2
3
4
5
6
7
< div  class="table">
     < div  class="row">
         < div  class="cell">内容内容内容内容内容内内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</ div >
         < div  class="cell">内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</ div >
         < div  class="cell">内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</ div >
     </ div >
</ div >

1、当设置display：table;时，table的padding设置会失效。【可自己测试一下】


.table {

        display: table;

        margin: 5px;

        width: 1000px;

        border:1px solid red;


    }


2、当设置display：table-row;时，margin和padding设置会失效。这里我进行了设置，可以看出是没有效果的。


.row {  
     display: table-row;      
     padding:100px;   
     margin:100px;
   }



3、当设置display：table-cell;时，margin设置会失效。这里我进行了设置，可以看出是没有效果的。


.cell {

        display: table-cell;

        padding: 10px;

        vertical-align: middle;/*定义行内元素垂直对齐*/

        height: 300px;

        border:1px solid green;


        -webkit-box-sizing: border-box;

        -moz-box-sizing: border-box;

        box-sizing: border-box;

    }


4、认识了上面的设置的作用和注意点以后，我们可以发现可以通过display:table-cell和vertical-align:middle;来进行垂直居中设置的,也是运用了cell时，vertical-align属性生效作用。




设置float或position会对默认布局造成破坏，可以考虑为之增加一个父div定义float等属性。