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

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既能自适应高度，也能在屏幕中间拉