<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:;
  left:;
  bottom:;
  right:;
  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里面的图片水平与垂直居中的方法的更多相关文章

  1. DIV或者DIV里面的图片水平与垂直居中的方法

    <div class=“box”> <img /> </div> 水平居中的常用方式: text-align:center ——这可以实现子元素字体,图片的水平居中 ...

  2. 使图片水平并垂直居中的一个Hack

    淘宝的一个前端面试题:使用纯CSS实现未知尺寸的图片(但高宽都小于200px)在200px的正方形容器中水平和垂直居中. 想起了vertical-align:middle;但是不行,后来才知道还要di ...

  3. 让DIV中的内容水平和垂直居中

    让一个层水平垂直居中是一个非常常见的布局方式,但在html中水平居中使用margin:0px auto;可以实现,但垂直居中使用外边距是无法达到效果的.(页面设置height:100%;是无效的),这 ...

  4. 如何让DIV相对于body水平和垂直居中

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

  5. css设置图片水平及垂直居中

    .box { /*非IE的主流浏览器识别的垂直居中的方法*/ display: table-cell; vertical-align:middle; /*设置水平居中*/ text-align:cen ...

  6. js脚本控制图片水平与垂直居中

    使用方法: 1.定义ResizeImg(obj)方法 function ResizeImg(obj) { var boxHeight = $(".box").height(); v ...

  7. css 水平、垂直居中

    水平居中 行内元素 行内元素:(img.span.文字等行内元素),通过在父级元素设置 text-align:center 使元素水平居中. 块级元素 块级元素:(div.p.h1...h6.ul.l ...

  8. css样式水平居中和垂直居中的方法

    水平居中(包含块中居中) 1. 定宽,左右margin为auto.(常规流块盒.弹性项目[不用定宽]) 例子:在box1盒子上设置宽,再设置margin:auto: <style> .bo ...

  9. CSS实现图片在div a标签中水平垂直居中

    CSS实现图片在div a标签中水平垂直居中 <div class="demo"> <a href="#"> <img src=& ...

随机推荐

  1. 5. Effective Java 第三版——使用依赖注入取代硬连接资源

    Tips <Effective Java, Third Edition>一书英文版已经出版,这本书的第二版想必很多人都读过,号称Java四大名著之一,不过第二版2009年出版,到现在已经将 ...

  2. 主从DB与cache一致性

    本文主要讨论这么几个问题: (1)数据库主从延时为何会导致缓存数据不一致 (2)优化思路与方案 一.需求缘起 上一篇<缓存架构设计细节二三事>中有一个小优化点,在只有主库时,通过" ...

  3. 十、 Spring Boot Shiro 权限管理

    使用Shiro之前用在spring MVC中,是通过XML文件进行配置. 将Shiro应用到Spring Boot中,本地已经完成了SpringBoot使用Shiro的实例,将配置方法共享一下. 先简 ...

  4. InfluxDB:cannot use field in group by clause

    最近在使用InfluxDB时,发现一个很奇怪的问题,一个本来正常的功能,做了一次改动后,就不能正常显示了. 一.查询语句 SELECT MEMORY FROM "ACM_PROCESS_MO ...

  5. adobe acrobat x pro破解版

    adobe acrobat x pro破解版是Adobe官方出品的PDF文档全能解决方案套件. PDF文件格式是Adobe公司设计的,用其公司开发的Adobe Acrobat X Pro来创建.编辑. ...

  6. IEEE1588协议简介

    IEEE1588协议,又称PTP(precise time protocol,精确时间协议),可以达到亚微秒级别时间同步精度,于2002年发布version1,2008年发布version2. IEE ...

  7. sqlserver 存储过程 分页搜索查询

    具体调用实例见代码最后一行注释区域 --if exists(select * from sysobjects where id = object_id(N'page_search') and type ...

  8. iOS 写给iOS开发者的React Native学习路线(转)

    我是一名iOS开发者,断断续续一年前开始接触React Native,最近由于工作需要,专职学习React Native也有一个多月了.网络上知识资源非常的多,但能让人豁然开朗.迅速学习的还是少数,我 ...

  9. 开源一个上架 App Store 的相机 App

    Osho 相机是我独立开发上架的一个相机 App,App Store地址:https://itunes.apple.com/cn/app/osho/id1203312279?mt=8.它支持1:1,4 ...

  10. NSQ之粗读浅谈

    回顾: 以前一直是C++开发(客户端),最近听同事讲go语言不错,随后便决定先从go语法开始投向go的怀抱.由于历史原因学习go语法时,用了半天的时间看完了菜鸟教程上相关资料,后来又看了易百教程上的一 ...