DIV或者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:

　　css:

　　.img_meng_show td{

　　vertical-align: middle;

　　text-align: center;

　　}

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

　　第一种方式：

　　HTML:

　　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中水平和垂直居中的方式实现。只是块元素的水平居中的话 text-align: center; 要换成 margin: 0 auto;

　　总结

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