聊一聊容器如何自适应高度和居于居中。

1.首先说一说，当你的div高度不确定的情况下，你要怎么操作才能自适应高度

法一：通过padding-top/bottom来填充容器。
 .screen{
        width:60%;
        border: 1px solid  #cccccc;
    }
       .placeholder{
           width:50%;  /* 父元素宽度的一半*/
           background-color:red; 
           padding-top:50%;
       }

<div class="screen">
       <div  class="placeholder">
       </div>    
 </div>

效果就是这个样子，div 完全没有给定高度，通过padding-top给撑起来的。你看需要多少，paddin-top/bottom的百分比就是多少。

但是这样的原因就是最大高度不可控。不能设置Max-height来控制其大小。那要怎么办呢？

法二：通过伪元素来控制margin/padding达到填充效果

    .screen{
        width:60%;
        border: 1px solid  #cccccc;
    }
       .placeholder{
           width:50%;  /* 父元素宽度的一半*/
           background-color:red; 
           position:relative;
           overflow: hidden;   
       }
       .placeholder:after{
           content :' ';           
           display: block;
           margin-top:100%;   
       } 

HTML代码还是一样的，效果也是一样的。只是这里是设置margin-top,和父元素的width是等比例存在的，宽高一致就是1:1，根据一个比例来算，1:2,1/2:1 都可以。

margin-top:200%  //高是宽的两倍

那如果要往容器里面加内容怎么样呢？

 <div class="screen">
       <div  class="placeholder">
            <img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=4267222417,1017407570&fm=200&gp=0.jpg" />
       </div>    
 </div>

比如我加一张图片，图片的宽高要怎么算；

       img{
           position: absolute;
           top:0;
           width :100%;
           height: 100%;
           
       }

图片设置position为绝对的，其他的样式自己定义就行。

这样设置以后，如果又想图片居于屏幕的中间要怎么办呢？

 .screen{
        width:50%;
        border: 1px solid  #cccccc;
    }
       .placeholder{
           width:50%;  /* 父元素宽度的一半*/
           background-color:red; 
           /*position:relative;
           overflow: hidden;   */
           position: absolute;
           left: 50%;
           margin-left: -25%;/*屏幕width的一半*/
       }
       .placeholder:after{
           content :' ';           
           display: block;
           margin-top:100%;   
       } 

好了这样，div既能自适应高度，也能在屏幕中间拉