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

最新推荐文章于 2024-08-16 14:10:43 发布

多来哈米

最新推荐文章于 2024-08-16 14:10:43 发布

阅读量5.9k

点赞数 1

分类专栏： js、前端文章标签： html

本文链接：https://blog.csdn.net/hgg923/article/details/79877241

版权

js、前端专栏收录该内容

57 篇文章 2 订阅

订阅专栏

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

如下图场景：

代码及样式：

<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>

效果图如下：