css中各种情况下的元素的垂直和水平居中的问题

问题:外边是一个容器，容器中还有一个容器，那么请问怎么让里边的容器垂直水平居中显示？？

      No1: 外边的容器宽度和高度确认，里边是行内元素

.container{width:200px; height:100px; line-height:100px;}
//外边的容器的css设置和命名  这样就ok了

      No2:里边的容器是img元素

.container{width:200px; height:100px; line-height:100px; vertical-align:middle; }
.wrap{vertical-align:middle;}//图片的命名和css代码

     No3：就是里边的元素是div元素

.cantainer{width: 300px; height: 150px; background: blue; text-align: center; vertical-align:middle; display: table-cell;}
//添加display属性（好好看看这个属性哦）
.wrap{margin:auto; width:100px;}

  No4：宽高固定的div在浏览器中水平/垂直居中

absolute将元素脱离文档流，通过“left: 50%; top: 50%;”和“margin-left: -width/2; margin-top: -height/2;”来实现；

.div1{
    background: red;width: 200px;height: 200px;position:absolute;
    top:50%;left:50%;
    margin-left:-100px;
    margin-top:-100px; 

}

 

 

 

 

 其实可以用js来计算里边容器的宽度和高度然后定位（涉及到js了 咳咳 以后再谈吧）