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

拼搏现实的明天。 2022-05-27 02:38 616阅读 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 条评论，616人围观）

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

相关阅读

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

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

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

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

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

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

相关 css实现图片上下左右居中

一种常用的方式是把外层的 div 设置为 table-cell；然后让内部的元素上下左右居中。 CSS 代码如下： .content { widt

向右看齐/ 2023年07月19日 08:10/ 0 赞/ 2 阅读

相关 DIV+CSS文字与图片上下垂直居中

<view class="orientation"> <image src="../../static/images/index/orientation.p

以你之姓@/ 2023年07月04日 11:05/ 0 赞/ 37 阅读

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMz

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