HTML页面，图片img在容器DIV中，上下左右居中（实用技能，css的table-cell）

拼搏现实的明天。 2022-05-27 02:38 561阅读 0赞

场景：让不规整的缩略图在容器中居中显示（针对特别长或特别宽的图）

如下图场景：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hnZzkyMw_size_16_color_FFFFFF_t_70][]

![20190418143838951.jpg][]

![20190418143852923.jpg][]

代码及样式：

<html>
    <head>
    	<title>百搭屋</title>
    	<meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
    	<style>
    		
    		.table {
    		  display: table;
    		  table-layout: fixed;
    		  width: 500px;height: 500px;border: 1px solid red;
    		  background:#F0F0F0;
    		}
    		.table-cell {
    		  display: table-cell;
    		  text-align: center;
    		  vertical-align: middle;
    		}
    	</style>
    </head>
    
    <body>
    	<div style="" class="table">
    		<div class="table-cell">
    			<img style="max-width:500px;max-height:500px;" src="https://ss0.baidu.com/73t1bjeh1BF3odCf/it/u=1111114400,1524974545&fm=85&s=BF80E901FF975FC60A8DD4D60300E0F0">
    		</div>	  
    	</div>
     </body>
    </html>

效果图如下：

![70][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hnZzkyMw_size_16_color_FFFFFF_t_70]: /images/20220527/fc6dafa9f62a473a8a6f8603e0bf3daf.png
[20190418143838951.jpg]: /images/20220527/4b9f1ad68fe24355b1e6ac47c8ca1adf.png
[20190418143852923.jpg]: /images/20220527/5ae17a83800946ecbdf5279ea010500c.png
[70]: /images/20220527/5afab0c083e04b388ce38461c63c14ce.png

发表评论取消回复

表情：

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

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

相关阅读

相关 html DI在DIV中上下左右居中

要在HTML中实现上下左右居中，可以使用CSS的Flexbox布局或Grid布局。下面是两种方法的示例代码：使用Flexbox布局：使用Grid布局：这两种方法都将

偏执的太偏执、/ 2024年02月21日 12:02/ 0 赞/ 24 阅读

相关 div居中显示(div在页面居中显示)

如何使div中div的内容居中显示 ![Image 1][] 超链接其中是为了让超链接换行 ; padding-top:\\px;是为了垂直居中，具体是多少

冷不防/ 2023年09月26日 11:56/ 0 赞/ 50 阅读

相关 css-图片左右上下居中自适应大小

![1021765-20190729163529052-1974909361.png][] html <a><img src="images/share/PHOTO

小灰灰/ 2023年08月17日 15:47/ 0 赞/ 118 阅读

相关 img在div中水平且垂直居中

一. 问题背景情况：`div`包着一个`img`，要使`img`水平且垂直居中二. 解决方案最最最关键：div中的`text-align:center;`是

川长思鸟来/ 2022年11月25日 13:23/ 0 赞/ 214 阅读

相关【css】absolute定位让图片在div中上下左右居中

html <div> <img src="../assets/images/404.gif" alt=""> </div> css

川长思鸟来/ 2022年11月18日 05:53/ 0 赞/ 103 阅读

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

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

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

相关 css实现图片上下居中显示

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xht

我就是我/ 2022年09月22日 15:58/ 0 赞/ 168 阅读

相关 DIV CSS字体居中实现DIV文字水平左右居中

> DIV CSS字体居中实现DIV CSS文字水平左右居中-css+div字体文字内容居中篇，使用DIV CSS实现字体居中的CSS样式单词为text-align，其值为ce

淩亂°似流年/ 2022年08月03日 15:40/ 0 赞/ 267 阅读

相关 HTML页面，图片img在容器DIV中，上下左右居中（实用技能，css的table-cell）

场景：让不规整的缩略图在容器中居中显示（针对特别长或特别宽的图）如下图场景： ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10

拼搏现实的明天。/ 2022年05月27日 02:38/ 0 赞/ 562 阅读

相关 css 让一个图片在固定的尺寸中上下左右居中object-fit

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMz

水深无声/ 2021年11月18日 01:36/ 0 赞/ 298 阅读