今天各种纠结，真的是不想写东西（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. 【mybatis】时间范围 处理时间格式问题 + 查询当天 本月 本年 + 按当天 当月 范围 查询 分组

    1.mybatis中查询时间范围处理: 例如2018-05-22 ~2018-05-23 则查出来的数据仅能查到2018-05-22的,查不到2018-05-23的数据! 为什么会这样? 明明时间字段 ...

  2. 设计模式之迭代器模式(PHP实现)

    github地址:https://github.com/ZQCard/design_pattern/** * 迭代器模式(Iterator Pattern)是 Java 和 .Net 编程环境中非常常 ...

  3. Linux下查找、删除、替换命令

    查看某目录下所有文件的个数: [root@localhost1 opt]# ls -l |grep "^-"|wc -l 查看某目录下所有文件的个数,包括子目录里面的: [root ...

  4. C#基于Socket的CS模式的完整例子

    基于Socket服务器端实现本例主要是建立多客户端与服务器之间的数据传输,首先设计服务器.打开VS2008,在D:\C#\ch17目录下建立名为SocketServer的Windows应用程序.打开工 ...

  5. 怎样设置gephi可画大规模网络图形

    (1)编辑gephi.conf 文件夹:\etc\gephi.conf 默认512MB.你能够改为22GB,约22528M # ${HOME} will be replaced by user hom ...

  6. EffectiveJava（15）强化对象和域的不可变性

    概念: 不可变类是其实例不能被修改的类,不可变类比可变类更加易于设计 实现和使用.它们不容易出错,而且更加安全. 优点 1.不可变对象只有创建时状态. 2.不可变对象本质上是线程安全的,它们不要求同步 ...

  7. sone1动态树

    这尼吗桑心病狂的动态树:http://www.lydsy.com/JudgeOnline/problem.php?id=3153 终于让哥以一种碉堡的姿势过了: 牛B轰轰的最后两个都是我的...无法超 ...

  8. 超高逼格Log日志打印

    代码地址如下:http://www.demodashi.com/demo/12646.html 前言 Log日志的打印一直是一个比较头疼的事,怎样才能让自己的log显示更多信息,怎样才能让自己的log ...

  9. 每日一招：如何才能在A股持续盈利？

    证券市场介入门槛低,是众多普通投资者希望实现自己的“中国梦”的首选场所,无论牛市熊市,源源不断的参与者前赴后继.在沪深A股这样一个大众市场,每年都在上演着七亏两平一赚的悲喜剧,赚钱的永远是少数人,但众 ...

  10. Eclipse 经常使用快捷键

    一.File 二.Edit Ctrl + 1  有益写错,让编辑器提醒改动 三.Refactor 抽取为全局变量 Refactor - Convert Local Variable to Field ...