如何居中图片及悬停效果？HTML/CSS FlexBox布局求助

嘿，作为HTML和CSS新手遇到Flexbox布局的对齐问题太正常啦，我帮你梳理下问题并修正代码：

问题分析 #

• 容器对齐设置冗余且方向偏差：你给.container加了justify-content: flex-end，但图片已经设置width:100%占满容器，这个属性反而容易引发布局冲突；另外align-content: center在单行Flex布局下完全无效。
• 图片与Overlay圆角不统一：Overlay设置了border-radius:10px，但图片没有，悬停时会出现圆角错位的视觉违和感。
• 过渡节奏不一致：文本用了0.8s过渡时长，Overlay用了0.5s，动画不同步会影响体验。

修正后的完整代码 #

CSS部分

.container {
  position: relative;
  width: 50%;
  display: flex;
  justify-content: center; /* 改为居中对齐，让图片在容器内居中 */
  align-items: center;
  margin: 0 auto; /* 让容器本身在页面水平居中，优化整体视觉 */
}

h1 {
  text-align: center;
  font-size: 50px;
  color: Grey;
}

.image {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px; /* 和Overlay统一圆角，避免视觉错位 */
}

.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-color: #008CBA;
  border-radius: 10px;
}

.text {
  color: white;
  background-color: #008CBA;
  opacity: 0;
  border-radius: 25px;
  font-size: 100px;
  position: absolute;
  top: 50%;
  left: 50%;
  padding: 10px;
  transition: .5s ease; /* 和Overlay统一过渡时长，让动画同步 */
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
}

.container:hover .overlay {
  opacity: 0.5;
}

.container:hover .text {
  opacity: 1;
}

HTML部分

<h1>Overlay Effect</h1>
<div class="container">
  <img src="http://www.freepngimg.com/download/technology/7-2-technology-picture.png" alt="Avatar" class="image">
  <div class="overlay"></div>
  <div class="text">Hey Sup!</div>
</div>

关键调整说明 #

1. 修正容器对齐：把.container的justify-content改为center，同时添加margin: 0 auto让容器自身在页面水平居中，解决整体布局的偏移问题。
2. 统一圆角样式：给图片添加和Overlay一致的border-radius，确保悬停时覆盖层和图片完全贴合。
3. 同步动画节奏：将文本的过渡时长改为和Overlay一致的0.5s，让悬停时的显示动画更流畅协调。

这样调整后，图片、Overlay和悬停文本就能完美对齐，悬停效果也会更自然啦！

内容的提问来源于stack exchange，提问作者Vinay