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. springMVC+ajax 文件上传 带进度条
			
    前端代码: <form id= "uploadForm"> <p >指定文件名: <input type="text" name= ...
    
			
    2. 
						
  2. Http协议相关内容
			
    http协议概述 HTTP是hypertext transfer protocol(超文本传输协议)的简写,它是TCP/IP协议的一个应用层协议,用于定义浏览器与WEB服务器之间交换数据的过程. 客户 ...
    
			
    3. 
						
  3. PyQt4入门学习笔记（三）
			
    # PyQt4入门学习笔记(三) PyQt4内的布局 布局方式是我们控制我们的GUI页面内各个控件的排放位置的.我们可以通过两种基本方式来控制: 1.绝对位置 2.layout类 绝对位置 这种方式要 ...
    
			
    4. 
						
  4. 微服务（Microservices）—Martin Fowler【翻译】
			
    本文转载自:http://www.cnblogs.com/liuning8023/p/4493156.html -------------------------------------------- ...
    
			
    5. 
						
  5. C# webform上传图片并生成缩略图
			
    其实里面写的很乱,包括修改文件名什么的都没有仔细去写,主要是想记录下缩略图生成的几种方式 ,大家明白就好! void UpImgs() { if (FileUpload1.HasFile) { str ...
    
			
    6. 
						
  6. LINQ to SQL语句(14)之Null语义和DateTime
			
    Null语义 说明:下面第一个例子说明查询ReportsToEmployee为null的雇员.第二个例子使用Nullable<T>.HasValue查询雇员,其结果与第一个例子相同.在第三 ...
    
			
    7. 
						
  7. [deviceone开发]-心形点赞动画示例
			
    一.简介 这个示例展示do_Animator组件的简单使用,通过点击"点赞"按钮,不断弹出心形图片,向上动画漂移到顶部消失.间隔时间和上下左右移动的步长都是一定范围的随机值.二.效 ...
    
			
    8. 
						
  8. block为什么用copy以及如何解决循环引用
			
    在完成项目期间,不可避免的会使用到block,因为block有着比delegate和notification可读性更高,而且看起来代码也会很简洁.于是在目前的项目中大量的使用block. 之前给大家介 ...
    
			
    9. 
						
  9. 【Bootstrap-插件使用】Jcrop+fileinput组合实现头像上传功能
			
    作者:Dreawer链接:https://zhuanlan.zhihu.com/p/24465742来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. 作者:梦游的龙猫(转 ...
    
			
    10. 
						
  10. [Erlang 0121] 当我们谈论Erlang Maps时,我们谈论什么 Part 3
			
    Erlang/OTP 17.0 has been released  http://www.erlang.org/download/otp_src_17.0.readme     Erlang/OTP ...
    
			
    11.