css实现未知图片宽度图片在div中水平居中

最新推荐文章于 2023-03-21 11:02:24 发布

兔子敲代码

最新推荐文章于 2023-03-21 11:02:24 发布

阅读量417

点赞数

文章标签： css html flex css3 html5

本文链接：https://blog.csdn.net/qq_38499671/article/details/109237936

版权

在开发文章页面的时候，会遇到对图文的处理，文字很简单啊，用text-again： justify；可以实现文本两端对齐，然后再设置首行缩进就OK了。

但是对于图片，我们不知道用户上传多大的图片，更不知道图片的宽度，要对图片进行居中处理感觉有点难度，下面分析一下我的思路：

处理办法想到两种

第一种：图片固定宽度；

例如：图片设置成宽80%，居中的话就用margin，因为剩余宽度就剩20%了，这样所有的图片都是一样宽度，还比较美观。但是有缺点，比这个尺寸小的会模糊，比这个宽度大的会被压缩，很明显这不是我想要的效果。不过像“今日头条”手机端是这样的，细心的可以去看看！

img:{
width:80%;
margin-left:10%;
margin-right:10%;
}

第二种：就是利用弹性布局，让图片居中

例如：图片宽度自动，最大宽度80%，大于这个尺寸才会生效变成80%，左右自动；使用弹性布局display：flex，如果还需要垂直居中的话，那就再加上align-items: center;

.img:{
max-width: 80%;
margin-left: auto;
margin-right: auto;
display: flex;/*水平居中*/
justify-content: center;
}

这样我们的图片就会无论用户上传多大的图片，都会始终居中了！！！

2020-5-11 补充：

第三种：未知宽度图片水平垂直居中方法

position: absolute;top: 50%;left: 50%;transform: translateX(-50%) translateY(-50%);

前提：父盒子有position属性，且有宽高，不然是不会生效的。利用这一点可以使用全屏弹框效果：http://course.51qux.com/595.html

关注