css 使图片水平垂直居中
1.利用display:table-cell,具体代码如下:
html代码如下:
<div class="img_wrap"> <img src="wgs.jpg"> </div>
css代码如下:
.img_wrap{ width: 400px; height: 300px; border: 1px dashed #ccc; display: table-cell; //主要是这个属性 vertical-align: middle; text-align: center; }
2.采用背景法:
html代码如下:
<div class="img_wrap"></div>
css代码如下:
.img_wrap{ width: 400px; height: 300px; border: 1px dashed #ccc; background: url(wgs.jpg) no-repeat center center; }
效果如下图:
本博客主要记录自己的学习点滴~,文章来源于总结,还有在工作中实际碰到的问题以记录。