如何让图片在div中居中显示?_IT百科

（1）第一种：用vertical-align

（2）第二种：flex布局（注意浏览器兼容性）

（3）position:absolute绝对定位方式

（4）使用display:table-cell配合vertical-align:center

思路：利用text-align属性将图片水平居中，然后设置padding-top的值使其垂直居中。

思路：只用padding属性，通过计算求得居中

问题中的居中是指水平居中，还是垂直居中？

水平居中：div设置：text-align:center

img设置：width:图片宽度margin:0 auto

垂直居中：div设置：position:relative

img设置：position:absolutetop:50%height:图片高度margin-top:图片高度的一半

需要准备的材料分别有：电脑、浏览器、html编辑器。

1、首先，打开html编辑器，新建html文件，例如：index.html，填写问题基础代码。

2、在index.html中的<body>标签中，将<img>标签调整为：<div style="text-align:center"><img src="small.png" /></div>。

3、浏览器运行index.html页面，此时图片成功被居中显示了。

欢迎分享，转载请注明来源：内存溢出

如何让图片在div中居中显示?