我们都知道让元素垂直居中有一种简单的方法：给需要居中的元素用一个父级包起来，并给它设置样式：display：table；同时给这个父级设置好高度；再给需要居中的元素一个display：table-cell；vertical-align:middle;这样被设置的元素就可以做到垂直居中，实现代码如下：

  1.  
  1. <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
    </head>
  2.  
  3. <body>
    <div style="background-color: aquamarine;display:table;height: 600px;">
        <!--如果这里设置了背景色，那么页面上则会显示这部分的颜色-->
        <div style="display: table-cell;vertical-align: middle;background-color: green">
           这是一个测试信息
        </div>
    </div>
    </body>
    </html>
  1.  

效果图如下

但是如果给这个需要居中的元素一个display：left之后，元素又不能居中了！！！：

这是怎么回事呢，于是又接着做了个test，发现脱离文档流的元素给它设置display属性之后居然不生效（拿position和float脱离文档流），个人在之前对脱离文档流的元素做了一个小结，它的表现形式有点像是display：inline-block；所以说了要是想用position：table-cell的方式让元素垂直居中需要避免给它脱离了文档流

关于用display：table让元素居中的小结的更多相关文章

  1. 网页元素居中的n种方法

    导语:元素居中对齐在很多场景看上去很和谐很漂亮.除此之外,对于前端开发面试者的基础也是很好的一个考察点.下面跟着作者的思路,一起来看下吧. 场景分析 一个元素,它有可能有背景,那我要它的背景居中对齐 ...

  2. CSS display:table属性用法- 轻松实现了三栏等高布局

    display:table:此元素会作为块级表格来显示(类似 <table>); display:table-cell属性指让标签元素以表格单元格的形式呈现,类似于td标签.目前IE8+以 ...

  3. Display:table;妙用，使得左右元素高度相同

    我们在设计网页的时候,为了左右能够分明一点,我们经常会在左边元素弄一个border-right,但是出现一个问题,如果左边高度比较小,这根线就短了,下面空了一部分,反正如果在右边的元素弄一个borde ...

  4. 边框，元素居中，盒子模型，margin,display,overflow,textarea,float,浮动停止条件，清除浮动影响，margin-top的bug，清除默认样式

    边框 solid实线 dotted虚线 dashed点线 盒子在页面中实际的宽高都是5部分组成 宽=borderleft+paddingleft+width+paddingright+borderri ...

  5. css元素居中方法

    几种居中方式,分情况使用: 1.已知父盒子宽度,子盒子宽度: div{ transform: translate(-50%,-50%); //margin-left: - 自身宽度一半: positi ...

  6. 大前端学习笔记整理【一】CSS盒模型与基于盒模型的6种元素居中方案

    概览 CSS盒模型,规定了元素框来处理元素的 内容.内边距.边框和外边距的方式 元素部分是指内容部分,也是最实际的内容,包围内容的称之为内边距,内边距外围是边框,边框外围就是外边距:且外边距是透明的, ...

  7. css实现元素居中

     参见详细教程,该教程涵盖了所有居中的情况: https://css-tricks.com/centering-css-complete-guide/ css元素居中 1.水平居中 1)文本,图片等行 ...

  8. 使用CSS完成元素居中的七种方法

    在网页布局中元素水平居中比元素垂直居中要简单不少,同时实现水平居中和垂直居中往往是最难的.现在是响应式设计的时代,我们很难确切的知道元素的准确高度和宽度,所以一些方案不大适用.据我所知, 在CSS中至 ...

  9. div内部元素居中

    要让div内部元素垂直居中,则给div加上此css样式: .div-vertical-middle{  height:200px;  width:304px;  line-height:50px;  ...

随机推荐

  1. Maximal Rectangle

    很不好想的一道题,参考:http://blog.csdn.net/doc_sgl/article/details/11832965 分为两步:把原矩阵转为直方图,再用largest rectangle ...

  2. JS验证只能输入数字，数字和字母等的正则表达式

    JS判断只能是数字和小数点 0.不能输入中文1)<input onpaste="return false;" type="text" name=" ...

  3. idea开发工具破解地址

    链接失效可以使用激活码.激活码不需要联网也可以开发. idea 在注册时选择 License server ,填http://idea.iteblog.com/key.php ,然后点击激活. 激活码 ...

  4. css文件 引用后不起作用

    你如果填写的是相对路径,那么检查一下路径是否正确. 如果相对路径正确,那么有可能你的css样式的层级错误(概率也不低),比如说图片的引用路径发生了改变等等. 要看你预览的浏览器是什么,我经常遇到IE预 ...

  5. Selenium使用

    定位 1.普通 by id, name,class_name,link_text 2.加强 xpath css

  6. maven打包

    1.利用maven-jar-plugin <build> <plugins> <!-- The configuration of maven-jar-plugin --& ...

  7. Delphi中DBChart的数据库应用

    一:属性相关:Series选项: (1)Format页(数据柱的风格) 在Color Each中打勾,就可使用多种颜色显示,color按钮用于设置颜色,Style用于设置图表的风格(Rectangle ...

  8. 【Java EE 学习 71 下】【数据采集系统第三天】【分析答案实体】【删除问题】【删除页面】【删除调查】【清除调查】【打开/关闭调查】

    一.分析答案实体 分析答案实体主要涉及到的还是设计上的问题,技术点几乎是没有的.首先需要确定一下答案的格式才能最终确定答案实体中需要有哪些属性. 答案格式的设计是十分重要的,现设计格式如下: 在表单中 ...

  9. 读书笔记《深度探索c++对象模型》 概述

    <深度探索c++对象模型>这本书是我工作一段时间后想更深入了解C++的底层实现知识,如内存布局.模型.内存大小.继承.虚函数表等而阅读的:此外在很多面试或者工作中,对底层的知识的足够了解也 ...

  10. Microsoft Visual Studio PDB文件相关事宜

    Microsoft Visual Studio PDB:调试的符号文件,程序数据库 (PDB) 文件保存着调试和项目状态信息,使用这些信息可以对程序的调试配置: 当以 /ZI 或 /Zi(用于 C/C ...