css让图片居中

不念不忘少年蓝@ 2022-06-04 08:28 282阅读 0赞

css让图片居中，不管图片是方图、竖图、横图，都可以让图片在父框架下居中，即方图则占满整个父框架；横图则左右填充上下居中；竖图则左右居中上下填充

1、html如下：

<body>
            <div id="redblock">
                <img src="katong.png" >  /*这里的图片路径自己设置*/
            </div>
        </body>

2、css如下

body{
    		
    		background-color: gray;
    	}
    
    	#redblock{
    		text-align: center;
    		display: table-cell;
    		vertical-align: middle;
    		width:400px;
    		height: 400px;
    		background-color: red;
    		
    	}
    
    	img{
    		max-width: 100%;
    		max-height: 100%;
    	}

3、给父级元素设置样式：

a、设定宽度和高度width、height

b、设置text-align:center     vertical-align:middle

c、设置display:table-cell

4、给Img设置max-width:100%     max-height:100%

5、显示的效果如下：

**横图**

![Center][]

**方图**

![Center 1][]

**竖图**

![Center 2][]

[Center]: /images/20220604/e30da62bd7544c2883fbafcd279e8466.png
[Center 1]: /images/20220604/9afc42a34a8948dd8585af8cc9d25772.png
[Center 2]: /images/20220604/d182f836f5b348c4ab2749b4fddb4c83.png

发表评论取消回复

表情：

评论列表（有 0 条评论，282人围观）

还没有评论，来说两句吧...

相关阅读

相关 CSS样式-图片居中显示

前言在前端开发的过程中，越来越体会到css样式的重要性。实现效果 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5n...

桃扇骨/ 2024年04月18日 09:05/ 0 赞/ 66 阅读

相关 CSS图片垂直水平居中

方案一、性能比方案二好 /将最外层元素都撑开到100%屏幕/ html,body{ width:100%; height:100%;

柔情只为你懂/ 2023年02月18日 12:58/ 0 赞/ 19 阅读

相关 css——利用translate让元素居中

参考：[https://blog.csdn.net/qq\_20264891/article/details/87873311][https_blog.csdn.net_qq_

灰太狼/ 2023年01月22日 05:50/ 0 赞/ 13 阅读

相关【css】让img图片居中显示

1.说明想要点击一下居中展示一张图片，可以使用fixed布局，展示图片的时候背景呈半透明黑色，再点击即隐藏 2.代码 HTML <div id="di

ゝ一纸荒年。/ 2022年10月19日 04:19/ 0 赞/ 226 阅读

相关 css——利用translate让元素居中

[css——利用translate让元素居中][css_translate] 父元素： position: relative; 居中元素： posi

男娘i/ 2022年09月09日 06:16/ 0 赞/ 227 阅读

相关 Markdown编辑器让图片居中

在markdown里默认插入图片一般默认都是居左显示想要让图片居中就得使用下面的html代码来实现 <center> <img src="这里输入图片地址

短命女/ 2022年08月28日 00:37/ 0 赞/ 277 阅读

相关 CSS中怎么让DIV居中

CSS 如何使DIV层水平居中今天用CSS碰到个很棘手的问题,DIV本身没有定义自己居中的属性, 网上很多的方法都是介绍用上级的text-align: center然后嵌

分手后的思念是犯贱/ 2022年08月26日 15:19/ 0 赞/ 285 阅读

相关 css让图片居中

css让图片居中，不管图片是方图、竖图、横图，都可以让图片在父框架下居中，即方图则占满整个父框架；横图则左右填充上下居中；竖图则左右居中上下填充 1、html如下：

不念不忘少年蓝@/ 2022年06月04日 08:28/ 0 赞/ 283 阅读

相关 css 如何让图片居中图片适应

前段时间做移动端开发遇到的问题，以前是没注意到css有个object-fit属性，一直对图片适应不知道何从下手。移动端基本上都是需要做图片适应处理的，比如轮播图，商品封面

小鱼儿/ 2022年02月27日 06:00/ 0 赞/ 287 阅读

相关 html css怎样让div居中

很多时候我们都需要div居中用css3的transform属性即可让div居中如代码所示先设置子元素的margin-top和margin-left为50%

た入场券/ 2021年10月19日 05:24/ 0 赞/ 404 阅读