css让图片居中

最新推荐文章于 2025-05-09 15:11:52 发布

赏花赏景赏时光

最新推荐文章于 2025-05-09 15:11:52 发布

阅读量2.5w

点赞数 14

分类专栏： css 文章标签： css让图片居中

本文链接：https://blog.youkuaiyun.com/tangxiujiang/article/details/78755123

版权

css 专栏收录该内容

33 篇文章

订阅专栏

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、显示的效果如下：

横图

方图

竖图

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

赏花赏景赏时光

关注关注

14
点赞
踩
37

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

css 使图片水平垂直居中

weixin_34258838的博客

10-09

4537

1.利用display:table-cell，具体代码如下： html代码如下： 1 <div class="img_wrap"> 2 　　<img src="wgs.jpg"> 3 </div> css代码如下： 1 .img_wrap{ 2 width: 400px; 3 height: 300px; 4 border: 1px...

CSS实现图片居中且缩放不影响图片纵横比

Einstellung的博客

03-09

4754

实现代码我们在编写页面代码的时候往往会需要添加图片。在使用过程中，获取的图片尺寸经常可能和页面需要的尺寸不一致，这时候就需要对获取图片进行缩放。对图片缩放有一定技巧，或者说是固定的编写代码套路。否则可能稍有不慎，就会导致图片被拉伸，失去原有纵横比。下面代码展示了一种保持图片纵横比缩放图片的套路。建议首先看一下这篇文章，使得基线位置和中线位置保持一致：图片垂直居中下面是代码： <!DOCTYPE html> <html> <head> &lt

参与评论您还未登录，请先登录后发表或查看评论

分别利用css和js来使div中的图片居中

03-05

博文链接：https://bazhuang.iteye.com/blog/156001

CSS实现图片垂直居中方法

热门推荐

unsleepfish的博客

05-15

5万+

图片的居中显示 css 有很多方法，但在很多情况下有的方法无效，这是件很头疼的事情，比如一般设置图片属性 text-align:center 水平居中，但这个方法经常无效，很多前端工程师都有研究过或者说是搜索过 CSS 图片居中方法吧。但其实CSS 图片居中有多种不同的情况，也有多种不同的解决方法，具体方法如下所示：图片居中又分为水平居中和垂直居中提示：在你开始阅读以下内容之前，你可以先了解CSS图片的基础内容。一、水平居中： 1、单独文字垂直居中我们只需要设置 CSS

css图片居中

m0_45218136的博客

09-18

7501

css图片水平垂直居中

css如何让图片居中

百变鹏仔工作室

02-04

1945

使用position和transform属性：将图片的父容器设置position: relative，将图片设置为position: absolute，然后使用transform属性进行居中偏移。使用表格布局：将图片的父容器设置为display: table，将图片设置为display: table-cell，并添加vertical-align: middle属性。以上是几种常用的方法，根据具体场景选择适合的方法即可。鹏仔前端pjxi.com。

css图片垂直居中 css中如何实现图片垂直居中

12-13

在曾经的淘宝UED 招聘中有这样一道题目： “使用纯CSS实现+未知尺寸的图片(但高宽都小于200px)在200px的正方形容器中水平和垂直居中。” 当然出题并不是随意，而是有其现实的原因，垂直居中是淘宝工作中最常遇到的...

CSS让图片垂直居中和底端对齐的代码

09-27

在网页设计中，让元素（如图片）在页面上实现垂直居中或底端对齐是常见的...以上就是关于CSS让图片垂直居中和底端对齐的详细解析。为了深入学习CSS布局，可以参考相关的CSS视频教程，进一步掌握各种布局技术和技巧。

CSS设置文字图片垂直居中的方法总结

12-02

总结，本文提供的CSS设置文字图片垂直居中的方法是一种简单实用的技巧，它利用了`display:inline-block`和`vertical-align:middle`的组合，以及辅助元素来达到目的。这种方法对于静态布局尤为适用，可以很好地满足...

html css 图片居中

weixin_33951761的博客

09-12

132

与其他一些display属性类似，table-cell同样会被其他一些CSS属性破坏，例如float, position:absolute，所以，在使用display:table-cell与float:left或是position:absolute属性尽量不用同用。设置了display:table-cell的元素对宽度高度敏感，对margin值无反应，...

css设置图片居中

吃醋不爱蘸饺子的胡诌乱造

04-17

722

css设置图片居中 1. 首先要使图片居中的话要保证它为块级元素，（可通过css设置display为：block） 2.然后设置对应元素img的margin为auto，text-align为center 实现css代码如下： img{ display: block; margin: auto; text-align: center; } 好像div 加上align也是可以实现，...

css 使图片居中显示

qq_32910205的博客

11-13

1625

图片在盒子内居中显示在图片的父级盒子上添加 { display: flex; justify-content: center; align-items: center; }

css中怎么让图片居中？css图片居中的方法总结

lin123_00的博客

05-18

1万+

在进行网页布局的时候，有时候图片的位置可能会影响整个页面的美观程度，所以对于图片的放置位置就得变化，那么，接下来的这篇文章将给大家来介绍关于图片在网页中如何使用css实现居中的方法，对于有需要的朋友来说可以做个参考。 css图片居中分css图片水平居中和垂直居中两种情况，那么下面我们就来分别看一看这些图片居中的实现方法。更多相关视频： 0基础前端利用『HTML+CSS』制作你喜欢的暗黑破坏神网页开发：BV1C54y1X7ro 前端发展简史，功能以及未来趋势！（你值得观看）：BV1w5411s.

css图片图片居中显示

☆╮123☆

07-20

1170

测试页面 * { padding: 0; margin: 0; } .box { width: 200px; height: 200px; overflow: hidden; border: 2px solid #000; border-radius: 50%; } div.box { background-position: center; backgro

css图片居中(水平居中和垂直居中)

yangmy_Shy的博客

09-04

2136

css图片居中(水平居中和垂直居中)css图片水平居中1.利用margin: 0 auto实现图片水平居中例如： <div style="text-align: center; width: 500px; border: green solid 1px;"> <img alt="" src="https://www.baidu.com/img/baidu_jgylogo...

图片万能居中css图片居中

youji8的博客

06-21

1631

.div{text-align:center;} .div img{vertical-align:middle;} .div:after{content:"";display:inline-block;vertical-align:middle;height:100%;width:0;} 图片万能居中，不需要知道大小高度，无理由居中同理div也可以...

css怎么让图片居中

03-12

<think>嗯，用户问的是CSS怎么让图片居中。这个问题看起来挺常见的，不过得仔细想想怎么回答清楚。首先，用户可能是在做网页布局，想让图片在容器里居中。图片居中通常有两种情况：水平居中和垂直居中，或者两者都要。可能需要分情况讨论。首先，水平居中。如果是行内元素的话，比如用img标签直接放在父容器里，可能只需要给父容器加text-align: center就行。但如果是块级元素的话，可能需要设置图片的margin左右auto，同时确保图片有宽度，不然可能撑满容器，无法看出居中效果。然后是垂直居中，这个稍微复杂点。如果父容器高度固定，可以用绝对定位，设置top:50%和transform: translateY(-50%)。或者使用Flexbox，设置align-items: center，这样垂直方向就居中了。或者用Grid布局，place-items: center，这样水平和垂直都居中。另外，用户可能想知道不同的方法，比如传统方法、Flexbox、Grid或者绝对定位。需要分别说明每种方法的用法，以及适用场景。比如Flexbox比较现代，代码简洁，兼容性的话可能需要考虑，但现在大部分浏览器都支持了。Grid也是类似的情况，可能更适合复杂的布局。还要注意图片本身是块级还是行内元素。比如img默认是行内元素，如果父容器用text-align: center的话，水平居中有效，但垂直不行。如果图片设置为块级元素，margin: 0 auto可以水平居中，但垂直的话可能需要其他方法。可能还需要提到，如果同时需要水平和垂直居中，Flexbox和Grid是最方便的。比如用Flexbox的话，父容器设置display: flex，justify-content: center和align-items: center。这样图片就完全居中了。另外，绝对定位的方法需要父容器有position: relative，然后图片设置position: absolute，top和left各50%，再用transform调整。这种方法在响应式布局中可能有用，但要注意父容器的定位。还有可能用户不知道如何选择哪种方法，可能需要简单比较一下各种方法的优缺点。比如Flexbox和Grid更简洁，但老版本浏览器不支持；绝对定位可能在某些情况下更灵活，但需要计算位置。最后，可能需要给出代码示例，每种方法都展示一下，比如水平居中、垂直居中、以及两者的结合。这样用户可以根据自己的需求选择合适的方法。同时提醒用户注意图片的display属性和父容器的样式设置，比如高度和宽度是否明确，否则可能影响居中效果。</think>在CSS中实现图片居中需要根据具体需求选择不同的方法。以下是5种常见场景的解决方案，按实现方式由简到难排列： 1. **水平居中（行内图片）** ```css .parent { text-align: center; /* 父级容器设置文本居中 */ } img { display: inline-block; /* 保持行内特性 */ } ``` *适用场景：图片作为行内元素时的简单水平居中* 2. **水平居中（块级图片）** ```css img { display: block; margin: 0 auto; /* 上下边距0，左右自动 */ width: 60%; /* 必须设置宽度 */ } ``` *适用场景：单独图片的水平居中展示* 3. **Flexbox垂直水平居中** ```css .parent { display: flex; justify-content: center; /* 主轴居中 */ align-items: center; /* 交叉轴居中 */ height: 400px; /* 必须设置高度 */ } ``` *现代布局首选方案，适合需要响应式设计的场景* 4. **Grid布局居中** ```css .parent { display: grid; place-items: center; /* 简写属性 */ height: 400px; } ``` *代码最简洁的现代方案，适合简单网格布局* 5. **绝对定位居中** ```css .parent { position: relative; height: 400px; } img { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); /* 修正元素自身尺寸 */ } ``` *适合需要精确控制的复杂布局场景* **实际应用建议：** 1. 现代项目优先使用Flexbox或Grid方案 2. 考虑浏览器兼容性时： - PC端可用绝对定位 - 移动端首选Flexbox 3. 图片尺寸较大时，建议配合`max-width: 100%`使用 **扩展技巧：** ```css /* 背景图片居中方案 */ .banner { background: url(image.jpg) center/cover no-repeat; height: 500px; } ``` *适合需要全屏背景图的场景*