div相对于父盒子垂直居中的几种方法，之前在网上看到很多种方法，确实说的很对，也很具体，但是我感觉对于初学者来说，一目了然是最重要的，所以，我把很高深的技巧，和很复杂的css样式都剔除掉，旨在让更多人能看懂。

具体事例方法如下：

   1.   其实这里的重点是，一定要给父盒子设置相对定位

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

 #one{
        width: 400px;
        height: 400px;
        border: 1px solid #000;
        position: relative;  //重点：必须给父元素设置相对定位
    }


#two{
    width: 200px;
    height: 200px;
    background-color: red;
    position: absolute;   // 给父元素设置绝对定位
    top: 50%;
    left: 50%;
    margin-left: -100px;
    margin-top: -100px;

}



</style>
<body>
<div id="one">
    <div id="two"></div>
</div>

</body>
</html>


   2.  不多说规则同上（只有思想不太一样）


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


  #one{
        width: 400px;
        height: 400px;
        border: 1px solid #000;
        position: relative;
    } 


    #two{
        width: 200px;
        height: 200px;
        background-color: red;
        position: absolute;
        margin: auto;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
    }

</style>
<body>
<div id="one">
    <div id="two"></div>
    <img src="" alt=""/>
</div>

</body>
</html>

最后说一下 让<img>垂直定位的方法

以下是html结构：


<div id="one">
    <div id="two"></div>
    <img src="" alt=""/>
</div>

css样式：



img {
         display:table-cell;
         text-align:center;
         vertical-align:middle;
 }



相信很多初学者对display：table-cell不是太了解，下面我说一下：


display:table-cell属性就是让标签元素以表格单元格的形式呈现，类似于td标签。目前IE8+以及其他现代浏览器都是支持此属性
的，但是IE6/7只能对你说sorry了，这一事实也是大大制约了display:table-cell属性在实际项目中的应用。

希望对你有帮助
                                         ---不青春


												


											
让div盒子相对父盒子垂直居中的几种方法的更多相关文章
	

    
						
  1. 让块元素在div中水平居中，并且垂直居中的五种方法
		
    在写代码前,先做下准备工作,写两个div,设置下div的大小,把小的div放在大的div里面.可以给小的div设置下颜色,方便观看. 方法一:写一个伪元素,将它设置为行内块元素,高度与父元素相同,写一 ...
    
		
    2. 
								
  2. div盒子水平居垂直中的几种方法
		
      div盒子水平居垂直中的几种方法<!DOCTYPE html><html>    <head>        <mete charset="ut ...
    
		
    3. 
						
  3. div垂直居中的几种方法
		
    CSS教程:div垂直居中的N种方法[转](原文地址:http://www.cnblogs.com/chuncn/archive/2008/10/09/1307321.html) 在说到这个问题的时候 ...
    
		
    4. 
						
  4. CSS垂直居中的四种方法
		
    写在前面的话 最近在Stack Overflow上看到 一个不错的回答 ,以下是我对其的总结,分享给大家. 垂直居中的四种方法 ①基础的方法 设置父元素的line-height等于height,这种方 ...
    
		
    5. 
						
  5. 顽石系列：CSS实现垂直居中的五种方法
		
    顽石系列:CSS实现垂直居中的五种方法 在开发过程中,我们可能沿用或者试探性地去使用某种方法实现元素居中,但是对各种居中方法的以及使用场景很不清晰.参考的内容链接大概如下: 行内元素:https:// ...
    
		
    6. 
						
  6. css 水平居中垂直居中的几种方法
		
    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
    
		
    7. 
						
  7. after及before伪元素及解决父元素塌陷的几种方法
		
    一.伪类和伪元素 CSS中伪类和伪元素有很多,也很好用!如果熟练使用的话可以解决很多问题 首先明白什么是伪类:伪类是基于当前元素的状态,而不是元素的id class等静态标志,它是动态变化的,它会在一 ...
    
		
    8. 
						
  8. css如何实现垂直居中（5种方法）
		
    css如何实现垂直居中(5种方法) 一.总结 一句话总结:行内只需要简单地把 line-height 设置为那个对象的 height 值就可以使文本居中了. 块的话可以尝试 margin:auto:  ...
    
		
    9. 
						
  9. CSS垂直居中的8种方法
		
    CSS垂直居中的8种方法 1.通过verticle-align:middle实现CSS垂直居中. 通过vertical-align:middle实现CSS垂直居中是最常使用的方法,但是有一点需要格外注 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. 通过一个实例理解 offsetLeft，offsetTop;  offsetWidth , offsetHeight
			
    obj.offsetTop 指 obj 相对于版面或由 offsetParent 属性指定的父坐标的计算上侧位置,整型 obj.offsetLeft 指 obj 相对于版面或由 offsetParen ...
    
			
    2. 
						
  2. 《PDF.NE数据框架常见问题及解决方案-初》
			
    <PDF.NE数据框架常见问题及解决方案-初> 1.新增数据库后,获取标识列的值: 解决方案:    PDF.NET数据框架,已经为我们考略了很多,因为用PDF.NET进行数据的添加操作时 ...
    
			
    3. 
						
  3. FFmpeg学习2：解码数据结构及函数总结
			
    在上一篇文章中,对FFmpeg的视频解码过程做了一个总结.由于才接触FFmpeg,还是挺陌生的,这里就解码过程再做一个总结. 本文的总结分为以下两个部分: 数据读取,主要关注在解码过程中所用到的FFm ...
    
			
    4. 
						
  4. html5语义化标签使用规范
			
    Html5添加了很多语义化标签,一个典型的html5页面结构可以如下安排 一.使用案例 1. 头部——header和nav标签 header头部,body下的直接子元素header一般用于放页面的介绍 ...
    
			
    5. 
						
  5. 记录软件工程课程项目开发时遇到的各种小问题(django)
			
    1.python manage.py makemigrations 无效/无法检测出model的变化 在修改了models.py之后,我们想要更新数据库的表,使用了python manage.py m ...
    
			
    6. 
						
  6. 用Middleware给ASP.NET Core Web API添加自己的授权验证
			
    Web API,是一个能让前后端分离.解放前后端生产力的好东西.不过大部分公司应该都没能做到完全的前后端分离.API的实现方式有很 多,可以用ASP.NET Core.也可以用ASP.NET Web  ...
    
			
    7. 
						
  7. WebUtils-网络请求工具类
			
    网络请求工具类,大幅代码借鉴aplipay. using System; using System.Collections.Generic; using System.IO; using System ...
    
			
    8. 
						
  8. C# 本质论 第二章 数据类型
			
    浮点数的精度由有效数字的个数决定.除非用分数表示时,分母恰好是2的整数次幂,否则用二进制浮点类型无法准确地表示该数(0.1,表示成分数是1/10,分母10不能用有限二进制表示),二进制浮点类型无法准确 ...
    
			
    9. 
						
  9. 配置IIS的通配符应用程序映射
			
    使用IIS 6架设网站,如果要使用伪静态的功能,可能需要设置“通配符应用程序映射(执行顺序)”. 在Windows Server 2012 r2 的IIS 8中,对应的是添加设置“通配符脚本映射”,参 ...
    
			
    10. 
						
  10. 基于CkEditor实现.net在线开发之路（7）列表页面开发动作介绍
			
    一个列表页面不止是查询,它也包含了很多业务上功能的实现,这些业务功能的实现的逻辑我称之为动作.如触发单击按钮删除数据,更改业务表数据,调用webService,调用WCF接口,弹出新窗体新增.修改.查 ...
    
			
    11.