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. BIRCH聚类算法原理
			
    在K-Means聚类算法原理中,我们讲到了K-Means和Mini Batch K-Means的聚类原理.这里我们再来看看另外一种常见的聚类算法BIRCH.BIRCH算法比较适合于数据量大,类别数K也 ...
    
			
    2. 
						
  2. scikit-learn Adaboost类库使用小结
			
    在集成学习之Adaboost算法原理小结中,我们对Adaboost的算法原理做了一个总结.这里我们就从实用的角度对scikit-learn中Adaboost类库的使用做一个小结,重点对调参的注意事项做 ...
    
			
    3. 
						
  3. 由css reset想到的深入理解margin及em的含义
			
    由css reset想到的深入理解margin及em的含义 原文地址:http://www.ymblog.net/content_189.html 经常看到这样语句,*{ margin:0px;pad ...
    
			
    4. 
						
  4. 嵌入式服务器jetty，让你更快开发web
			
    概述 jetty是什么? jetty是轻量级的web服务器和servlet引擎. 它的最大特点是:可以很方便的作为嵌入式服务器. 它是eclipse的一个开源项目.不用怀疑,就是你常用的那个eclip ...
    
			
    5. 
						
  5. 看我是如何处理自定义线程模型---java
			
    看过我之前文章的园友可能知道我是做游戏开发,我的很多思路和出发点是按照游戏思路来处理的,所以和web的话可能会有冲突,不相符合. 来说说为啥我要自定义线程模型呢? 按照我做的mmorpg或者mmoar ...
    
			
    6. 
						
  6. PHP unserialize()
			
    定义和用法 unserialize() 将已序列化的字符串还原回 PHP 的值. 序列化请使用 serialize() 函数. 语法 unserialize(str) 参数 描述 str 必需.一个序 ...
    
			
    7. 
						
  7. 明显调用的表达式前的括号必须具有(指针)函数类型 编译器错误 C2064
			
    看到“明显调用的表达式前的括号必须具有(指针)函数类型”这句时我才发现我的语文水平有多烂,怎么看都看不懂,折腾了半天才知道是哪里出了问题. 举个简单的例子 class CTest { void (CT ...
    
			
    8. 
						
  8. Xshell显示中文乱码问题
			
    [文件]–>[打开]–>在打开的session中选择连接的那个,点击[属性] -> [终端], 编码选择为:Unicode(UTF-8),然后重新连接服务器即可.也可以在Xshell ...
    
			
    9. 
						
  9. EF 添加方式比较
			
    using System; using System.Collections.Generic; using DBAccess.Models; using EntityFramework.BulkIns ...
    
			
    10. 
						
  10. java IO流详解
			
    流的概念和作用 学习Java IO,不得不提到的就是JavaIO流. 流是一组有顺序的,有起点和终点的字节集合,是对数据传输的总称或抽象.即数据在两设备间的传输称为流,流的本质是数据传输,根据数据传输 ...
    
			
    11.