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

    https://github.com/fool2fish/dragon-book-exercise-answers

  2. Nand flash uboot 命令详解

    转:http://blog.chinaunix.net/uid-14833587-id-76513.html nand info & nand device 显示flash的信息: DM365 ...

  3. ASIHTTPRequest框架使用总结系列之阿堂教程5（上传数据）

    在上篇文章中,阿堂和网友们分享了如何用ASIHTTPRequest框架下载数据的实例,本篇阿堂将数据介绍如何用ASIHTTPRequest框架上传数据的应用实例.       数据上传是通过ASIHT ...

  4. IMAP 命令

    最近学习了一下IMAP命令,现在也算总结一下学习的东西,先说说IMAP命令,如果你使用的是163.126邮箱,反正是网易家的邮箱,那么这里就有很多坑要踩了,因为网易邮箱的特殊性,由于网易邮箱在中国占有 ...

  5. IntelliJ IDEA 取消控制台行数限制

    在idea7之后的版本中取消了 控制台行数设置 选项,只能通过更改配置文件进行更改 在%安装目录%/bin中找到idea.properties文件,更改idea.cycle.buffer.size项值 ...

  6. linux /boot目录下的文件分析

    一． Linux 启动流程 首先说一下Linux系统大概的启动过程: 1. 主机加电后, 系统首先加载BIOS, 这个BIOS是以写在主板上的． 2. BIOS启动后,执行一些例如开机自检,硬件初始化 ...

  7. 转：svn 更新指定文件夹

    通常由于创建很多个branch和tag,当我们要去checkout指定tag和branch的时候,会不得不把整个branch/tag目录checkout出来.是不是有点傻??!!! 那么如何有选择ch ...

  8. cmd.exe启动参数说明

    启动命令解释程序 Cmd.exe 的新范例.如果在不含参数的情况下使用,cmd 将显示操作系统的版本和版权信息. 语法 cmd [{/c | /k}] [/s] [/q] [/d] [{/a | /u ...

  9. win10企业版激活密钥

    NX9MP-TY3DJ-VYMW8-WWVRF-9W3F4

  10. Cygwin-安装和配置ssh服务

    Cygwin介绍: Cygwin是一个在windows平台上执行的类UNIX模拟环境.它对于学习UNIX/Linux操作环境,或者从UNIX到Windows的应用程序移植,或者进行某些特殊的开发工作, ...