实现img垂直居中

最新推荐文章于 2025-05-16 14:20:02 发布

原创最新推荐文章于 2025-05-16 14:20:02 发布 · 3.5k 阅读

1 ·

CC 4.0 BY-SA版权

css 专栏收录该内容

6 篇文章

订阅专栏

博客介绍了img元素垂直居中的两种方法。当不知道img元素高度时，给img添加并列兄弟元素，设置其高度为父容器高度，再与img元素居中对齐；若知道img元素高度，则采用绝对定位实现div垂直居中。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

针对情况：不知道img元素高度

原理：给img元素添加一个并列的兄弟元素，将这个兄弟元素的高度设为父容器的高度，再对这个兄弟元素和img元素添加居中对齐，

div{

height:600x; width : 800px;

}

img{

width:98%;vertical-align:middle;

}

span{

display:inline-block; height:100%；vertical-align:middle;

}

如果知道img元素的高度采用绝对定位

div垂直居中

<style>
			.content{
				width: 400px;
				height: 400px;
				background: bisque;
			}
			.center {
				width: 200px;
				height: 200px;
				position: relative;
				top: 50%;
				transform: translateY(-50%);
				background: #87CEEB;
				margin: auto;
			}
		</style>
		<div class="content">
			<div class="center"></div>
		</div>

div垂直居中

<style>
			.content{
				width: 400px;
				height: 400px;
				background: bisque;
				display: flex;
				align-items: center;
			}
			.center {
				width: 200px;
				height: 200px;
				background: #87CEEB;
				margin: 0 auto ;
			}
		</style>
		<div class="content">
			<div class="center"></div>
		</div>