您现在的位置: 365建站网 > 365学习 > 用Div+CSS 实现元素垂直居中的方法(文字和图片)

用Div+CSS 实现元素垂直居中的方法(文字和图片)

文章来源:365jz.com     点击数:239    更新时间:2017-12-14 19:18   参与评论
div垂直居中 CSS div盒子上下垂直居中,让DIV盒子在任何浏览器中任何分辨率的显示屏浏览器中处于水平居中和上下垂直居中。
div垂直居中常用于单个盒子,如一个页面里只有一个登录布局,使用div css让这个登录布局水平和css垂直居中。
这里介绍一种最简单兼容性最好的水平居中与上下垂直居中的方法。
1、具体实例代码如下

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<title>上下垂直居中 在线演示 DIVCSS5</title>
<style>
#main {position: absolute;width:400px;height:200px;left:50%;top:50%;
margin-left:-200px;margin-top:-100px;border:1px solid #00F}
/*css注释:为了方便截图,对CSS代码进行换行*/
</style>
<body>
<div id="main">DIV水平居中和上下垂直居中</div>
</body>
</html>

这里设置一个“#main”对象样式,宽400px,高200px,使用了绝对定位position样式同时使用绝对定位left和top,并且同时设置margin-top和margin-left,为了观察到效果,所以对此div盒子加了个红色边框。
2、实例截图
div+css实现div对象同时上下垂直居中和水平居中截图
div+css实现div对象同时上下垂直居中和水平居中截图
3、水平垂直居中原理介绍
这里使用了绝对定位position:absolute,使用left和top设置对象距离上和左为50%,但如果设置50%,实际上盒子是没有实现居中效果,所以又设置margin-left:-200px;margin-top:-100px;,这里有个技巧是,margin-left的值是宽度一半,margin-top的值也是对象高度一半,同时设置为负,这样就实现了水平和垂直居中。

我们在设计页面的时候,经常要把DIV居中显示,而且是相对页面窗口水平和垂直方向居中显示,如让登录窗口居中显示。我们传统解决的办法是用纯CSS来让DIV居中。在本文中,我将给大家讲述如何用CSS和jQuery两种方法让DIV水平和垂直居中。



CSS让DIV水平居中

说明,本文中所指的DIV包括HTML页面中所有的元素。

让一个DIV水平居中,直接用CSS就可以做到。只要设置了DIV的宽度,然后使用margin设置边距0 auto,CSS自动算出左右边距,使得DIV居中。

.mydiv{  
     margin:0 auto;  
     width:300px;  
     height:200px;  
 }


但是如果要使DIV垂直方向也居中,恐怕CSS需要修改了。



CSS实现水平和垂直居中

要让DIV水平和垂直居中,必需知道该DIV得宽度和高度,然后设置位置为绝对位置,距离页面窗口左边框和上边框的距离设置为50%,这个50%就是指页面窗口的宽度和高度的50%,最后将该DIV分别左移和上移,左移和上移的大小就是该DIV宽度和高度的一半。
.mydiv{ 
   width:300px;  
   height:200px;  
   position:absolute;  
   left:50%;  
   top:50%;  
   margin:-100px 0 0 -150px 
}

该方法使用普遍,但是前提是必需设置DIV的宽度和高度。如果当页面DIV宽度和高度是动态的,比方说需要弹出一个DIV层并且要居中显示,DIV的内容是动态的,所以宽度和高度也是动态的,这时需要用jQuery可以解决居中。




jQuery实现水平和垂直居中

jQuery实现水平和垂直居中的原理就是通过jQuery设置DIV的CSS,获取DIV的左、上的边距偏移量,边距偏移量的算法就是用页面窗口的宽度减去该DIV得宽度,得到的值再除以2即左偏移量,右偏移量算法相同。注意DIV的CSS设置要在resize()方法中完成,就是每次改变窗口大小时,都要执行设置DIV的CSS,代码如下:

$(window).resize(function(){ 
    $(".mydiv").css({ 
        position: "absolute", 
        left: ($(window).width() - $(".mydiv").outerWidth())/2, 
        top: ($(window).height() - $(".mydiv").outerHeight())/2 
    });        
});

此外在页面载入时,就需要调用resize()。

 $(function(){
     $(window).resize();
 }); 


DIV里面的图片水平与垂直居中的方法

<div class=“box”>
  <img />
</div>

1.水平居中:

  1)box设置  text-align:center ;    text-align:center可以实现子元素字体,图片的水平居中。

      2)img设置  margin:0 auto;display:block  ;            margin:0 auto是针对块元素的水平居中方法,所以要加上display:block。

2.垂直居中:

  1)图片使用padding,用box的高度减去图片的高度再除以2,就是padding-top的值,这样也可以实现图片在div里居中。也可以在设置margin:0 auto时,把0改为刚才padding-top的值也可以。

  2)

img{
    position:relative;
    top:50%;
    left:50%;
    margin-top:负图片height的一半;
    margin-left:负图片width的一半;
  }


  3)box设置 display: table-cell;vertical-align: middle;                       display: table-cell 相当于是把标签元素当作一个单元格来处理。但是唯一的缺点就是IE6/7不兼容。



垂直居中的另外种方法:table的宽高自己设置

    html:

<table class="img_meng_show">
  <tr>
    <td>
       <img src="">
    </td>
  </tr>
</table>


    css:  

 .img_meng_show td{
    vertical-align: middle;
    text-align: center;
 }

  这样图片就在table里面垂直居中了



DIV垂直居中的方法:

HTML:

<div class="box></div>

css:

.box{
  position:absolute(或者是fixed);
  top:0;
  left:0;
  bottom:0;
  right:0;
  margin:auto;
  width:100px;
  height:200px;
}


 这个能实现div垂直居中,如果要图片也垂直居中的话,也可以把图片放进div里,但是必要条件就是宽高必须加上,margin也必须加上;

  如果只想垂直居中,只要top与bottom,然后 margin:auto 0;

  同理,只想水平居中,只要top与bottom,然后 margin: 0 auto;

 但是这种方法不支持ie8以下,可考虑用于手机端。

如对本文有疑问,请提交到交流论坛,广大热心网友会为你解答!! 点击进入论坛


发表评论 (239人查看0条评论)
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
用户名: 验证码: 点击我更换图片
最新评论
------分隔线----------------------------