今天各种纠结，真的是不想写东西（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. 当ASP.NET Forms验证方式遭遇苹果IOS

    一.问题出现 我在用ASP.NET MVC4做微信开发的时候,用Forms验证方式做为authentication. 一般都是在web.config加: <authentication mode ...

  2. 使用ASIHTTPRequest 编译提示找不到"libxml/HTMLparser.h"的解决方法

    使用ASIHTTPRequest xcode编译提示找不到"libxml/HTMLparser.h",解决方法如下: 1>.在xcode中左边选中项目的root节点,在中间编 ...

  3. [置顶] kubernetes资源类型--ingress

    Ingress在K8S1.1之前还没有. 概念 Ingress是一种HTTP方式的路由转发机制,为K8S服务配置HTTP负载均衡器,通常会将服务暴露给K8S群集外的客户端. Ingress是一个允许入 ...

  4. select自己定义属性值

    select自己定义属性值 1.问题背景 下拉框能够传递值和内容,只是有时为了传值,还须要连带其它的值也一起传过来.假设用title属性.鼠标移到下拉框上方会显示出来,这样就会导致被暴露出来.所以,为 ...

  5. 通过Linux定时任务实现定时轮询数据库及发送Http请求

    通过Linux定时任务实现定时轮询数据库及发送Http请求 概述 有时需要临时增加一个定时任务(需要根据数据库查询结果然后发送HTTP请求),如果在项目中额外增加(Java+Spring+Quartz ...

  6. C++ 设置控制台输出颜色

    #include <stdint.h> #include <iostream> #include <string> #include <Windows.h&g ...

  7. Android学习（十一） File文件操作

    File类 1.获取当前应用程序的目录: this.getFilesDir();                                             //获取当前应用程序的数据目录 ...

  8. 通知传值(NSNotificationCenter)

    watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvenVveW91MTMxNA==/font/5a6L5L2T/fontsize/400/fill/I0JBQk ...

  9. eclipse显示包的层次关系

    如何在eclipse中显示包的层次关系呢?如下图所示

  10. java Map根据value排序

    通用方法 public class MapUtil { public static <K, V extends Comparable<? super V>> Map<K, ...