布局（一）display：table-cell

html：

      
一行文字
      
多行文字......
      

css：

div{
      height:200px;
      width:200px;
      border:1px solid red;
}

1）单行文字垂直居中

.box1{
      line-height:200px;
}

2）多行文字居中

.box2{
      display:table-cell;
      vertical:middle;
}

3）容器居中

• 1

.box3{
      position:absolute;
      top:50%;
      left:50%;
      margin-top:-101px;
      margin-left:-101px;
}

• 2

.box3{
      margin:0 auto;
}

下面简述一下display：table-cell的用法；

设置了display：table-cell的元素：

• 对宽度高度敏感
• 对margin值无反应
• 响应padding属性
• 内容溢出时会自动撑开父元素

display：table-cell的几种用法

1.大小不固定元素的垂直居中
分析:
父元素设置display:table-cell；子元素设置:vertical-align:middle；

html:

    

    

    


css:
.box{display:table-cell;height:300px;}
.box div{display:inline-block;width:50px;vertical-align:middle;}
.box1{ height:100px; background:red;}
.box2{ height:180px; background:green;}
.box3{ height:120px; background:blue;}

2.两列自适应布局
分析：
将父元素这是dispaly:table;子元素一设置完毕后；子元素二的宽度设置最大（尽可能宽），浏览器会自动适应浏览器宽度。

html:

    

    


css:
.box{display:table;height:100px;}
.box1{display:inline-block;(或者float:left;)height:100%;width:100px; background:red;}
.box2{ display:table-cell;width:20000px; background:green;}

3.等高布局
分析：
单行和多行登高：父元素这是display:table;子元素设置:display:table-cell;vertical-align:middle;

html:

        
我和右边等高
        
table表格中的单元格最大的特点之一就是同一行列表元素都等高。所以，很多时候，我们需要等高布局的时候，就可以借助display:table-cell属性。说到table-cell的布局，不得不说一下“匿名表格元素创建规则”

css:
.box{display:table;height:100px;}
.box div{display:table-cell;vertical-align: middle}
.box1{width:100px;}
.box2{width:300px;}

4.和inline-block组合使用
分析：
父元素这是display:table;子元素这是display:table-cell;text-align:left;子元素中的子元素设置display:inline-block;会设置该子元素的对齐方式

html:

    

        
A2222
        
B3333
    
    

        
B3333
        
A2222
    
css:
.content {display: table;width: 1000px;border: 2px solid yellow;}
.box{display: table-cell;}
.left { text-align: left;border: 1px solid red;}
.right {text-align: right;border: 1px solid green;}
.text { display: inline-block;height: 100px;border: 1px solid blue;}