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

2024-07-09 13:03| 来源: 网络整理| 查看: 265

水平居中的常用方式：

　　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; 就行了。

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

1 img{ 2 　　　　position:relative; 3 　　　　top:50%; 4 　　　　left:50%; 5 　　　　margin-top:负图片height的一半； 6 　　　　margin-left：负图片width的一半； 7 　　}

　　第三种方式：图片未知宽高，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:

1 2 　　 3 　　　　 4 　　　　　　　 5 　　　　 6 　　 7

css:　　

1 .img_meng_show td{ 2 　　　vertical-align: middle; 3 　　　text-align: center; 4 }

DIV水平和垂直居中的方法：

第一种方式：

HTML:

【本文地址】

今日新闻