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

时间:2021-05-08

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

HTML代码:


复制代码代码如下:
<div class="wrap">
<div class="main first">
<div id="left" class="yuan"></div>
<div id="right" class="yuan"></div>
</div>
</div>
CSS:
CSS Code复制内容到剪贴板
  • .main{
  • width:400px;
  • height:200px;
  • overflow:hidden;
  • background-color:#ccc;
  • position: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{
  • bottombottom:-50px;
  • rightright:-50px;
  • 第一种方法:利用负margin,前提是需要知道尺寸。兼容性最好。
    设定水平和垂直偏移父元素的50%,再根据实际长度将子元素上左挪回一半大小

    复制代码代码如下:
    .first{
    top: 50%;
    left: 50%;
    margin-left: -200px;
    margin-top: -100px;
    }
    第二种方法:利用CSS3的transform,宽度不定,支持IE9+

    复制代码代码如下:
    .second{
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    }

    以上这篇让DIV水平垂直居中的两种完美方法推荐就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。

    原文链接:http://www.cnblogs.com/lsiria/p/5279890.html

    声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。

    相关文章