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



<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>

<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>


 




效果图如下




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




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


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

    
								
  1. 网页元素居中的n种方法
		
    导语:元素居中对齐在很多场景看上去很和谐很漂亮.除此之外,对于前端开发面试者的基础也是很好的一个考察点.下面跟着作者的思路,一起来看下吧. 场景分析 一个元素,它有可能有背景,那我要它的背景居中对齐  ...
    
		
    2. 
						
  2. CSS display:table属性用法- 轻松实现了三栏等高布局
		
    display:table:此元素会作为块级表格来显示(类似 <table>); display:table-cell属性指让标签元素以表格单元格的形式呈现,类似于td标签.目前IE8+以 ...
    
		
    3. 
						
  3. Display:table;妙用，使得左右元素高度相同
		
    我们在设计网页的时候,为了左右能够分明一点,我们经常会在左边元素弄一个border-right,但是出现一个问题,如果左边高度比较小,这根线就短了,下面空了一部分,反正如果在右边的元素弄一个borde ...
    
		
    4. 
						
  4. 边框，元素居中，盒子模型，margin,display,overflow,textarea,float,浮动停止条件，清除浮动影响，margin-top的bug，清除默认样式
		
    边框 solid实线 dotted虚线 dashed点线 盒子在页面中实际的宽高都是5部分组成 宽=borderleft+paddingleft+width+paddingright+borderri ...
    
		
    5. 
						
  5. css元素居中方法
		
    几种居中方式,分情况使用: 1.已知父盒子宽度,子盒子宽度: div{ transform: translate(-50%,-50%); //margin-left: - 自身宽度一半: positi ...
    
		
    6. 
						
  6. 大前端学习笔记整理【一】CSS盒模型与基于盒模型的6种元素居中方案
		
    概览 CSS盒模型,规定了元素框来处理元素的 内容.内边距.边框和外边距的方式 元素部分是指内容部分,也是最实际的内容,包围内容的称之为内边距,内边距外围是边框,边框外围就是外边距:且外边距是透明的, ...
    
		
    7. 
						
  7. css实现元素居中
		
     参见详细教程,该教程涵盖了所有居中的情况: https://css-tricks.com/centering-css-complete-guide/ css元素居中 1.水平居中 1)文本,图片等行 ...
    
		
    8. 
						
  8. 使用CSS完成元素居中的七种方法
		
    在网页布局中元素水平居中比元素垂直居中要简单不少,同时实现水平居中和垂直居中往往是最难的.现在是响应式设计的时代,我们很难确切的知道元素的准确高度和宽度,所以一些方案不大适用.据我所知, 在CSS中至 ...
    
		
    9. 
						
  9. div内部元素居中
		
    要让div内部元素垂直居中,则给div加上此css样式: .div-vertical-middle{  height:200px;  width:304px;  line-height:50px;   ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. EventBus
			
    EventBus GitHub 上的地址 https://github.com/greenrobot/EventBus EventBus干的事情可以概括来说 别人可以根据某一个事件订阅我,但是他得去实 ...
    
			
    2. 
						
  2. Doctype的作用
			
    <!DOCTYPE> 声明不是 HTML 标签:它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令,也就是定义文档类型. 所有的浏览器都需要两种模式:怪异模式和严格模式 ...
    
			
    3. 
						
  3. CodeIgniter 3 源码学习笔记《一》
			
    CodeIgniter 是一套给 PHP 网站开发者使用的应用程序开发框架和工具包. 它的目标是让你能够更快速的开发,它提供了日常任务中所需的大量类库, 以及简单的接口和逻辑结构.通过减少代码量,Co ...
    
			
    4. 
						
  4. linux 文件系统
			
    / 根目录 /bin 存放着启动时所需要的普通程序.很多程序在启动以后也很有用,它们放在这个目录下是因为它们经常要被其他程序调用 /boot 很多Linux系统把内核映像和其他一些和启动有关的文件都放 ...
    
			
    5. 
						
  5. 自定义注解之运行时注解(RetentionPolicy.RUNTIME)
			
    对注解概念不了解的可以先看这个:Java注解基础概念总结 前面有提到注解按生命周期来划分可分为3类: 1.RetentionPolicy.SOURCE:注解只保留在源文件,当Java文件编译成clas ...
    
			
    6. 
						
  6. jquery动态添加的html，第三方插件无法生效的情况
			
    今天一个问题纠结了半天,问题如下图  问题大致就是如上,新增的内容死活点不起,插件没有生效,在一个装逼前端群里面问,给我的答案是叫我去了解事件委托,了解一下事件冒泡!! 好吧,我一上午加半个下午的时间 ...
    
			
    7. 
						
  7. seo优化urlrewrite伪静态技术
			
    1.下载urlrewrite-3.2.0.jar 2.在WEB-INF下增加urlrewrite.xml <?xml version="1.0" encoding=" ...
    
			
    8. 
						
  8. 3ds max旋转简化后模型
			
    简化后的模型无法与原场景直接匹配,因此需要以下步骤: 简化后的模型导入,原点在右上角 旋转后,方法是选中所有模型,右键->旋转 在偏移的x和y各输入180 还有做一些平移,微调 在导入整个she ...
    
			
    9. 
						
  9. *使用while循环遍历数组创建索引和自增索引值
			
    package com.chongrui.test;/* *使用while循环遍历数组 *  *  * */public class test {    public static void main ...
    
			
    10. 
						
  10. git与github使用
			
    Git和Github简单教程 目录: 零.Git是什么 一.Git的主要功能:版本控制 二.概览 三.Git for Windows软件安装 四.本地Git的使用 五.Github与Git的关联 六. ...
    
			
    11.