弹性（flex）布局实现图片水平垂直居中

雷凌汽车发布会布局技巧

最新推荐文章于 2023-08-28 14:20:46 发布

原创最新推荐文章于 2023-08-28 14:20:46 发布 · 3.5k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#弹性布局

弹性布局专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一种使用弹性布局(display: flex)实现图片和文字图标在遮罩层上水平垂直居中的方法，适用于不同尺寸图片的响应式设计。

			<div class="photo my1">
				<img src="./public/img/1.png">
				<div class="title">
					<a href="">
					<p>雷凌汽车上市发布会</p>
					<i class="fa fa-search-plus"></i>
					</a>
				</div>
			</div>

代码中title是遮罩层，鼠标触碰显示，因为每个photo里面的图大小都不一样，实现遮罩层内文字和图标的居中就可以用display：flex；弹性布局

水平垂直居中代码：

.photo .title{
    opacity: 0;
    transition: 1.5s;
    color: white;
    display: flex;
    justify-content:center;水平居中
    align-items: center;垂直居中
}

效果图：
在这里插入图片描述