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

本文来自（零度）之前文章失误消失，好不容易找回来一部分，赶紧补上喽！

今天各种纠结，真的是不想写东西（ps 我比较懒）但是老是有人问这个问题，于是我就本着分享精神还是整理一下，好了废话不多说 开始上代码。

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

第一种情况: 外边的容器宽度和高度确认，里边是行内元素，那么答案就是

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

*************于是有人说 你在逗我 这个我也知道。。。*************** 别着急，循序渐进嘛！

第二种情况 里边的容器是img元素

.container{width:200px; height:100px; line-height:100px; vertical-align:middle; }

.wrap{vertical-align:middle;}//图片的命名和css代码

第三种情况就是里边的元素是div元素

.cantainer{width: 300px; height: 150px; background: blue; text-align: center; vertical-align:middle; display: table-cell;}//添加display属性

.wrap{margin:auto; width:100px;}

有人说还能用js来计算里边容器的宽度和高度然后用定位呢   我想说 思路是对的 但是请你看一下标题，

一般面试出的这个问题不是为了考你的js基础 而且看你的css基础 和你的思维能力 分情况来解释这样会觉得你这个人思路敏捷清晰，会留下一个好印象

*************人家第一次(写)，有点紧张************ 不喜勿喷