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

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

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

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

    问题:外边是一个容器,容器中还有一个容器,那么请问怎么让里边的容器垂直水平居中显示?? No1: 外边的容器宽度和高度确认,里边是行内元素 .container{width:200px; height ...

  2. CSS中伪类及伪元素用法详解

    CSS中伪类及伪元素用法详解   伪类的分类及作用: 注:该表引自W3School教程 伪元素的分类及作用: 接下来让博主通过一些生动的实例(之前的作业或小作品)来说明几种常用伪类的用法和效果,其他的 ...

  3. 【CSS】思考和再学习——关于CSS中浮动和定位对元素宽度/外边距/其他元素所占空间的影响

      一.width:auto和width:100%的区别   1.width:100%的作用是占满它的参考元素的宽度.(一般情况下参考元素 == 父级元素,这里写成参考元素而不是父级元素,在下面我会再 ...

  4. CSS中浮动和定位对元素宽度/外边距/其他元素所占空间的影响

    ---恢复内容开始--- 一.width:auto和width:100%的区别   1.width:100%的作用是占满它的参考元素的宽度.(一般情况下参考元素 == 父级元素,这里写成参考元素而不是 ...

  5. 数据库表设计时一对一关系存在的必要性 数据库一对一、一对多、多对多设计 面试逻辑题3.31 sql server 查询某个表被哪些存储过程调用 DataTable根据字段去重 .Net Core Cors中间件解析 分析MySQL中哪些情况下数据库索引会失效

    数据库表设计时一对一关系存在的必要性 2017年07月24日 10:01:07 阅读数:694 在表设计过程中,我无意中觉得一对一关系觉得好没道理,直接放到一张表中不就可以了吗?真是说,网上信息什么都 ...

  6. CSS中使用文本阴影与元素阴影

    文本阴影介绍 在CSS中使用text-shadow属性设置文本阴影,该属性一共有4个属性值如:水平阴影.垂直阴影.(清晰度或模糊距离).阴影颜色. text-shadow属性值说明,在文本阴影实践中: ...

  7. 关于css中伪类及伪元素的总结

    css中的伪类和伪元素总是混淆,今天参考了很多资料,也查看了部分文档,现将伪类及伪元素总结如下: 一.由来: 伪类和伪元素的引入都是因为在文档树里有些信息无法被充分描述,比如CSS没有"段落 ...

  8. CSS:在IE浏览器下，元素下沉一行的解决办法

    HTML: <ul> <li><a href="">嘻嘻嘻嘻嘻嘻</a><span>2015-12-17</spa ...

  9. css中的字体样式及元素样式

    css中的字体样式一般包含有就9中,常见的有7种.这7种依次为: 1.字体样式:font-family: 2.字体大小:font-size: 3.字体加粗:font-weight: 4.字体斜体:fo ...

随机推荐

  1. intel 硬盘加速技术

    Intel Smart Response Technology 混合硬盘技术 Intel Rapid Storage Technology SERVER:

  2. 安卓查看包名，activity方法

    https://www.cnblogs.com/wangcp-2014/p/6144530.html 一.有源码情况 直接打开AndroidManifest.xml文件,找到包含android.int ...

  3. nginx $document_uri 参数使用

    $document_uri  表示访问的url 现在我的需求是,访问 www.abc.com  请求到 www.abc.com/abc/在nginx配置文件中加入 if ($document_uri ...

  4. JAVA中几种常见集合的使用实例

    Java.util.ArrayList(类): *;import java.util.*;public class CollectionTest{//List是一个能包含重复元素的已排序的Collec ...

  5. 【OpenGL4.0】GLSL渲染语言入门与VBO、VAO使用：绘制一个三角形 【转】

    http://blog.csdn.net/xiajun07061225/article/details/7628146 以前都是用Cg的,现在改用GLSL,又要重新学,不过两种语言很多都是相通的. 下 ...

  6. 前端存储之indexedDB

    在前一个阶段的工作中,项目组要开发一个平台,为了做出更好的用户体验,实现快速.高质量的交互,从而更快得到用户的反馈,要求在前端把数据存储起来,之后我去研究了下现在比较流行的前端存储数据库,找到了ind ...

  7. Elasticsearch 基础使用

    使用 cURL 执行 REST 命令 可以对 Elasticsearch 发出 cURL 请求,这样很容易从命令行 shell 体验该框架. “Elasticsearch 是无模式的.它可以接受您提供 ...

  8. OSQL.EXE 命令行下脱裤mssql

    cd C:\Program Files\Microsoft SQL Server\100\Tools\Binn\ OSQL.EXE -S "localhost" -U " ...

  9. 块设备驱动之NOR FLASH驱动

    转载请注明出处:http://blog.csdn.net/ruoyunliufeng/article/details/25240947 一.硬件原理 从原理图中我们能看到NOR FLASH有地址线,有 ...

  10. foreach 加& 什么意思？

    foreach 加&遍历的同时改变原数组即修改数据或者增加数据 foreach 加& 什么意思? 注意:如果我要改变数组某一个值 直接遍历的话原数组是不会变的 下面提供两种方法 1.我 ...