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

水平居中的常用方式:

  text-align:center ——这可以实现子元素字体,图片的水平居中。

  margin:0 auto —— 这是针对块元素的水平居中方法

垂直居中的常用方式:   

    vertical-align: middle;——这个垂直居中属性,只对 inline 或者 inline-block 元素有效。

    这里没考虑flex的垂直居中的用法

div中图片水平和垂直居中方式:

  第一种方式:直接手动计算的方式。已知box的高度和图片的高度

.box{
    width: 300px;
    height: 300px;
    border: 1px solid red;
    text-align: center;
}
img{
    width: 80px;
    height: 80px;
    padding-top: 110px;
}

 备注:这种方式是:用box的高度减去图片的高度再除以2,就是padding-top的值,当然也可以使用margin-top,这样也可以实现图片在div里垂直居中。水平居中就用 text-align: center; 就行了。

  第二种方式:图片已知宽高

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

  第三种方式:图片未知宽高,box最好固定高度。

img{
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

 备注:如果不固定,自适应高度的话,图片估计会跑到div的上面一点。这种是使用css3的方式来实现水平垂直居中,当然兼容性的话,不支持transform就不支持这种方式了

  第四种方式: 把box当做单元格,box的宽高可不用设置,让图片自己扩张也行。这种方式box的宽高最好固定。当然不固定也能实现效果。            

.box{
    width: 300px;
    height: 300px;
    vertical-align: middle;
    text-align: center;
    display: table-cell;
    border: 1px solid red;
}

 备注: display: table-cell 相当于是把标签元素当作一个单元格来处理。唯一的缺点就是IE6/7不兼容。  

  第五种方式:使用table来达到水平垂直居中的效果。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;
 }

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垂直和水平居中,但是必要条件就是宽高必须加上,margin也必须加上。如果想里面的图片也水平和垂直居中,可以参照上面图片用margin-left这种方式;

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

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

 但是这种方法不支持ie8以下。

 第二种方式:

使用css3 translate的方法,也能让div垂直水平居中:

.box{
    position: fixed(或者absolute);
    top: 50%;
    left: 50%;
    width: 100px;
    /*height: 100px;*/高度可以不定死
    background: skyblue;
    transform: translate(-50%,-50%);
}

如果是div中的div,即

<div class="out">
    <div class="in"></div>
</div>

 这种结构,也可以参考图片在div中水平和垂直居中的方式实现。只是块元素的水平居中的话 text-align: center; 要换成 margin: 0 auto;
 

总结

以上所述是小编给大家介绍的DIV或者DIV里面的图片水平与垂直居中的方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!

标签:
水平垂直居中的方法 水平垂直居中,,水平居中和垂直居中

免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com

《魔兽世界》大逃杀!60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容,新游玩模式《强袭风暴》即将于3月21 日在亚服上线,届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕,并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时,他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中,玩家将会进入一个全新的海盗主题大逃杀式限时活动,其中包含极高的风险和史诗级的奖励。

《强袭风暴》不是普通的战场,作为一个独立于主游戏之外的活动,玩家可以用大逃杀的风格来体验《魔兽世界》,不分职业、不分装备(除了你在赛局中捡到的),光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式,玩家在加入海盗主题的预赛大厅区域前,可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹,《巨龙崛起》和《魔兽世界:巫妖王之怒 经典版》的玩家都可以获得奖励。