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. ITTC数据挖掘平台介绍(四) 框架改进和新功能
			
    本数据挖掘框架在这几个月的时间内,有了进一步的功能增强 一. 超大网络的画布显示虚拟化     如前几节所述,框架采用了三级层次实现,分别是数据,抽象Node和绘图的DataPoint,结构如下:   ...
    
			
    2. 
						
  2. JVM学习（3）——总结Java内存模型
			
    俗话说,自己写的代码,6个月后也是别人的代码……复习!复习!复习!涉及到的知识点总结如下: 为什么学习Java的内存模式 缓存一致性问题 什么是内存模型 JMM(Java Memory Model)简 ...
    
			
    3. 
						
  3. niginx代理配置
			
    常用关键词:rewrite.proxy_pass location ^~ /address/ { proxy_set_header Host xx.sohu.com; #设置header proxy_ ...
    
			
    4. 
						
  4. 通过Http接口及SolrNet 两种方法基于Solr5.5.1 实现CURD
			
    前言 老规矩,任何技术的入门我通常都会总结增删改查,本文我就通过HttpWebRequest和SolrNet的方式实现Solr最基础的增删改查(CURD).对于自己的完整项目,同时不想过于依赖第三方类 ...
    
			
    5. 
						
  5. 轻量级OLAP（二）：Hive + Elasticsearch
			
    1. 引言 在做OLAP数据分析时,常常会遇到过滤分析需求,比如:除去只有性别.常驻地标签的用户,计算广告媒体上的覆盖UV.OLAP解决方案Kylin不支持复杂数据类型(array.struct.ma ...
    
			
    6. 
						
  6. express路由探析（续）
			
    上一篇分析了express的路由机制,这次主要补充一些没有说到的东西. 之前说到,Router是中间件容器,Route是路由中间件,他们各自维护一个stack数组,里面存放layer,layer是封装 ...
    
			
    7. 
						
  7. 翻译：使用 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 ...
    
			
    8. 
						
  8. SSH中Action的单例与多例
			
    Structs2中的Bean默认的是单例,在整个程序运行期间,每个Bean只有一个实例,只要程序在运行,这个实例就一直存在. 对于Action来说,单例就容易出问题.如果客户端每次提交的参数都是一样的 ...
    
			
    9. 
						
  9. Is-A，Has-A，Use-A（转载）
			
    原文地址:http://blog.csdn.net/loveyou128144/article/details/4749576 而Is-A,Has-A,Use-A则是用来描述类与类之间关系的.简单的说 ...
    
			
    10. 
						
  10. STL: unordered_map 自定义键值使用
			
    使用Windows下 RECT 类型做unordered_map 键值 1. Hash 函数 计算自定义类型的hash值. struct hash_RECT { size_t operator()(c ...
    
			
    11.