多语言展示
当前在线:1417今日阅读:86今日分享:14

最新方法,img图片在div里居中显示

在做页面开发时,经常我们会在div里放置一个图片,但默认情况下图片都是显示在div的左上方的,如果让其居中显示?我们来看看。
方法/步骤
2

运行页面,可以看到图片显示在div的左上角。

3

要让其居中显示,我们可以简单的加上text-align:center的样式。

4

但这样设置只能让图片水平居中。

5

要垂直居中,一种新的方法,是先让图片设置为绝对定义,然后设置left, top为50%,当然父容器,div要设置为position:relative;

6

这样设置后,图片还不能居中显示,因为图片本身有宽高,会有一些偏移。

7

我们需要加上transform:translate(-50%,-50%);让其为自身偏移50%,这样就能水平,垂直都居中了。

推荐信息