<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;
 

总结

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

猜你喜欢

• 用CSS3如何制作一个圆弧动态的倒计时功能

  这篇文章主要介绍了css3 实现圆形旋转倒计时功能,需要的朋友可以参考下

• 鼠标滚轮怎么实现，哪些事项要注意

  这篇文章主要介绍了鼠标滚轮事件&Mac触控板双指事件，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

• 在jsp中包含一个静态文件出现乱码如何解决

  大家都知道在jsp中include的有两种方式，一种是<jsp:includepage="">，另一种是<%@includefile=""%>在jsp中包含一个静态文件（.html）会产生乱码问题，此时有两种解决方案：方法一：可以在每一个html文件中第一行添加<%@pagecontentType="text/html;charset=UTF-8"l

• 在CSS中清除内外边距怎样做，方法是什么

  css清除边距的方法：1、利用margin属性清除元素的外边距，语法为“元素{margin:0px;}”；2、利用padding属性清除元素内边距，语法为“元素{padding:0px;}”。

• 用Canvas来画圆有几种方法，具体操作是什么

  我们都应该知道canvas可以用于在浏览器上绘制各种各样的图，那么，如何使用canvas画一个圆形呢？本篇文章将给大家介绍关于使用canvas画一个圆形的三种动态实现方法。