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

    同理选中第一列的两个,按向右箭头,整体友谊.

  2. Delphi创建开机启动项的方法示例

    Delphi可以通过创建开机启动项键值的方法,将程序添加到开机启动项中.通过本实例代码就可以为您的程序添加到快速启动中,随着Windows一起启动,开机即运行的程序.该实例代码简单,主要是通过添加注册 ...

  3. 在React组件unmounted之后setState的报错处理

    最近在做项目的时候遇到一个问题,在 react 组件 unmounted 之后 setState 会报错.我们先来看个例子, 重现一下问题: class Welcome extends Compone ...

  4. 彻底理解Javascript 中的 Promise（-------------------------------***---------------------------------）

    ES6原生提供了 Promise 对象. 到底是何方妖怪呢?打出来看看: 所谓 Promise,就是一个对象,用来传递异步操作的消息.它代表了某个未来才会知道结果的事件(通常是一个异步操作),并且这个 ...

  5. Android kernel Crash后，定位出错点的方法

    转载:http://blog.csdn.net/wlwl0071986/article/details/11635749 1. 将/prebuild/gcc/linux-x86/arm/arm-lin ...

  6. VMware报错“原因: 未能锁定文件”，打开失败

    原文:http://jingyan.baidu.com/article/425e69e6bf64dbbe15fc16fe.html VMware打开复制的虚拟机,报错“原因: 未能锁定文件”,打开失败 ...

  7. SparkStreaming数据源Flume实际案例分享

    一.什么是Flume? flume 作为 cloudera 开发的实时日志收集系统,受到了业界的认可与广泛应用.Flume 初始的发行版本目前被统称为 Flume OG(original genera ...

  8. 百度地图 Android SDK - 标注（Marker）的基本使用

    标注(Marker)是开发人员最常使用的地图覆盖物志一.今天就来向大家介绍一些标注(Marker)的最基本用法! 实现目标: 1.构建基础地图页面: 2.在地图的中心点处加入 Marker: 3.实现 ...

  9. scss使用后的简单入门总结

    端午节第一天 将之前做的一个小demo的css样式改为了scss 好吧 改完了 赶紧由小兵 升级到中尉了 什么是scss? 我的理解是scss 就是css 的预处理器,使css变得更加富有逻辑. 有什 ...

  10. mac权限

    mac文件后面出现@权限 去除方法: xattr -c 文件名  目录也可以