让DIV水平垂直居中的两种完美方法推荐

今天写的了 百度 前端学院春季班的 任务 ：定位和居中问题&nbs p; 由于 距离 上次学习CSS有点久远了，加上以前木有记笔记的习惯，方法忘得只剩下一种，今天通过网上查阅资料总结了以下两种 简单 的方法让DIV水平垂直居中。=。=
先来个效果图：

HT ML 代码：

复制代码

代码如下:

<div class="wrap">
<div class="m ai n First ">
<div id="left" class="yuan"></div>
<div id="right" class="yuan"></div>
</div>
</div>

CSS：

CSS Code 复制内容到剪贴板

.main{         width :  400px ;         h ei ght :  200px ;         overflow :  hidden ;         background-color :  # ccc ;         pos IT ion :  absolute ;    }    .yuan{         width :  100px ;         height :  100px ;         background-color : yellow ;         border -radius: 50%;        -moz- border -radius: 50%;        - webkit - border -radius: 50%;         position :  absolute ;    }    #left {         top : - 50px ;         left : - 50px ;    }    #right {         bottom bottom : - 50px ;         right right : - 50px ;   

第一种方法： 利用 负m arg in，前提是需要 知道  尺寸 。兼容性最好。
设定水平和垂直偏移父元素的50%，再根据实际长度将子元素上左挪回一 半 大小

  复制代码  
代码如下:

.first{
     top: 50%;
     left: 50%;
     mar gin -left: -200px;
     margin -t op: -100px;
 }

第二种方法：利用CSS3的transform， 宽 度不定，支持IE9+

  复制代码  
代码如下:

.second{
     left: 50%;
     top: 50%;
     transform: translate(-50%,-50%);
 }
@H_621_ 304 @

以上这篇让DIV水平垂直居中的两种完美方法推荐就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。
原文链接： http://HdhCmsTestcnblogs测试数据/lsiria/p/5279890.html 
						
						

						  
						
					
总结
       
以上是  为你收集整理的 让DIV水平垂直居中的两种完美方法推荐 全部内容，希望文章能够帮你解决 让DIV水平垂直居中的两种完美方法推荐 所遇到的问题。
		
如果觉得  网站内容还不错，  推荐好友。

      
查看更多关于让DIV水平垂直居中的两种完美方法推荐的详细内容...
        

          
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://haodehen.cn/did204947