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

今天各种纠结，真的是不想写东西（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>



 

 还有一些别得方法也可以做到 我这里就不一一列举了！

posted @ 2015-06-02 21:31  请低下头  阅读(285)  评论(0)  编辑  收藏  举报