今天各种纠结，真的是不想写东西（ps 我比较懒）但是老是有人问这个问题，于是我就本着分享精神还是整理一下，好了废话不多说 开始上代码
问题:外边是一个容器，容器中还有一个容器，那么请问怎么让里边的容器垂直水平居中显示？？
考察知识点:基本css知识
下边咱们开始说以下 那么几种情况
(1)外边的容器宽度和高度确认，里边是行内元素，那么答案就是
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
*{margin: 0; padding: 0; border: none;}
.contain{width: 300px; height: 300px; border: 1px solid red; background: #999;text-align: center; }
.contain span{line-height: 300px;}
</style>
</head>
<body>
<div class="contain">
<span>我是行内元素 我要垂直水平居中</span>
</div>
</body>
</html>
这个就不贴图了 自己两分钟就能测试出来
于是下边开始有人说 我xx 这么简单我也知道 （一切技术都是从简单的开始的 像很多语言的第一个程序都是helloworld一样）
(2)里边的容器是img元素（为什么把img元素单独拿出来啊 因为 img元素是一个空元素 也有人叫做替代元素）
解释名词 空元素/替代元素：替换元素就是浏览器根据元素的标签和属性，来决定元素的具体显示内容。
有哪些:(X)HTML中的<img>、<input>、<textarea>、<select>、<object>都是替换元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
*{margin: 0; padding: 0; border: none;}
.contain{width: 400px; height: 400px; border: 1px solid red; background: #999;text-align: center; vertical-align:middle; display: table-cell;}
</style>
</head>
<body>
<div class="contain">
<img src="img/dog.jpg"/><!--图片大小为200*200-->
</div>
</body>
</html>
效果如下：
(3)里边的容器是div元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
*{margin: 0; padding: 0; border: none;}
.contain{width: 400px; height: 400px; border: 1px solid red; background: #999;text-align: center; vertical-align:middle; display: table-cell;}
.wrap{width: 200px; height: 200px; background: yellow; margin: auto;}
</style>
</head>
<body>
<div class="contain">
<div class="wrap"></div>
</div>
</body>
</html>
还有一些别得方法也可以做到 我这里就不一一列举了！