DIV或者DIV里面的图片水平与垂直居中的方法
我要评论
<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里面的图片水平与垂直居中的方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
相关文章
- 这篇文章主要为大家介绍了在DIV+CSS布局的页面里，让布局、背景图片、文字内容居中的方法，从布局内容到页面里文章文字居中都是非常重要的，而css来设置居中也是非常简单的2014-10-09
- 这篇文章主要介绍了在不定宽高的情况下，div内图片如何垂直居中，css样式如何书写？示例代码如下2014-07-09
- 正如标题所言图片与上层的div保持水平、垂直都居中，网上会搜索到很多类似标题的文章，不过大同小异，本文写了一个希望对大家有所帮助2013-08-12
- 让图片在div容器里上下左右居中，在实际应用中是很常见的，下面为大家演示个示例，希望对大家有所帮助2013-08-02
- 关于图片垂直居中的话题想必大家在论坛或者是百度搜索列表中看到了不少了吧，烦人的是没有具体或者相当详细的解决方法，希望本文所整理的知识点可以帮助到你2013-03-22
- 2009-06-19
本文介绍了div 图片如何在DIV内水平居中，无论文字居中、图片居中等内容居中我们都可以使用以上两种方法实现，一般推荐使用CSS进行，但网页多时候，我们只需要修改CSS文件2021-11-30
最新评论