今天各种纠结，真的是不想写东西（ps 我比较懒）但是老是有人问这个问题，于是我就本着分享精神还是整理一下，好了废话不多说 开始上代码
问题:外边是一个容器，容器中还有一个容器，那么请问怎么让里边的容器垂直水平居中显示？？
考察知识点:基本css知识
下边咱们开始说以下 那么几种情况
(1)外边的容器宽度和高度确认，里边是行内元素，那么答案就是
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title></title> 6 <style> 7 *{margin: 0; padding: 0; border: none;} 8 .contain{width: 300px; height: 300px; border: 1px solid red; background: #999;text-align: center; } 9 .contain span{line-height: 300px;} 10 </style> 11 </head> 12 <body> 13 <div class="contain"> 14 <span>我是行内元素 我要垂直水平居中</span> 15 </div> 16 </body> 17 </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>
还有一些别得方法也可以做到 我这里就不一一列举了！