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. 后台管理UI的选择
			
    最近要做一个企业的OA系统,以前一直使用EasyUI,一切都好,但感觉有点土了,想换成现在流行的Bootstrap为基础的后台UI风格,想满足的条件应该达到如下几个: 1.美观.大方.简洁 2.兼容I ...
    
			
    2. 
						
  2. angular2 问题请教
			
    angular2 通过http服务进行对后端api的远程调用? 我简单的尝试了一下,发现了几个问题,记录一下,以方便查找问题. angular2 http服务的跨域问题?跨域本身就是一个很复杂的问题, ...
    
			
    3. 
						
  3. 使用 NuGet 下载最新的 Rafy 框架及文档
			
    为了让开发者更方便地使用 Rafy 领域实体框架,本月,我们已经把最新版本的 Rafy 框架程序集发布到了 nuget.org 上,同时,还把 RafySDK 的最新版本发布到了 VisualStud ...
    
			
    4. 
						
  4. 翻译：使用 ASP.NET MVC 4, EF, Knockoutjs and Bootstrap 设计和开发站点 - 1
			
    原文地址:http://ddmvc4.codeplex.com/ 原文名称:Design and Develop a website using ASP.NET MVC 4, EF, Knockout ...
    
			
    5. 
						
  5. 简述9种社交概念 SNS究竟用来干嘛？
			
    1.QQ 必备型交流工具基本上每一个网民最少有一个QQ,QQ已经成为网民的标配,网络生活中已经离不开QQ了.虽然大家嘴上一直在骂 QQ这个不好,那个不对,但是很少有人能彻底离开QQ.QQ属于IM软件, ...
    
			
    6. 
						
  6. El表达式的关系运算符
			
    El表达式的关系运算符: ==  对应  eq !=   对应  ne >    对应  gt <    对应  It
    
			
    7. 
						
  7. 高效 Java Web 开发框架 JessMA v3.4.1
			
    JessMA 是功能完备的高性能 Full-Stack Web 应用开发框架,内置可扩展的 MVC Web 基础架构和 DAO 数据库访问组件(内部已提供了 Hibernate.MyBatis 与 J ...
    
			
    8. 
						
  8. Eclipse（一）
			
    Eclipse的初步学习
    
			
    9. 
						
  9. Three.js制作360度全景图
			
    这是个基于three.js的插件,预览地址:戳这里 使用方法: 1.这个插件的用法很简单,引入如下2个js <script src="js/three.min.js"> ...
    
			
    10. 
						
  10. awk应用
			
    h3 { color: rgb(255, 255, 255); background-color: rgb(30,144,255); padding: 3px; margin: 10px 0px }  ...
    
			
    11.