Html 如何将图像居中对齐，并在悬停时覆盖文本？ 我试图创建一个水平滚动的图像库，并且在窗口中间将其定位有问题。我试图将flex的展示添加到身体上，但这样做对我来说不起作用

我是flexbox的新手，所以我不确定我是否做得对，我只是在寻求全面的建设性批评和指导

html，
身体{
宽度：100%；
身高：100%；
}
身体{
边缘：2米；
}
.包装纸{
显示器：flex；
弯曲方向：行；
}
img{
最小高度：400px；
最大高度：420px；
显示器：flex；
右侧填充：2米；
}

---

要使div在屏幕上居中，您可以更改

top

属性，如下所示：

.wrapper{
  display: flex;
  flex-direction: row;
  position: absolute;
  top: 20%;
}

要隐藏水平滚动，可以执行以下操作：

html, body{
  width: 100%;
  height: 100%;
  overflow-y: hidden;
}

要在鼠标悬停时在图像上覆盖文字，请执行以下操作：

  <div class="img_container_1">
   <img src="https://source.unsplash.com/collection/1163637/480x480">
   <div class="overlay">
     <div class="text">Hello World</div>
   </div>
 </div>

  .overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    opacity: 0;
    height: inherit;
    width: inherit;
    transition: .5s ease;
}

.image_container_1{
   position: relative;
}

.img_container_1:hover .overlay {
  opacity: 1;
}

img {
  min-height: 400px;
  max-height: 420px;
  display: flex;
  padding-right: 2em;
}

.text {
   color: white;
   font-size: 20px;
   position: absolute;
   top: 50%;
   left: 50%;
   -webkit-transform: translate(-50%, -50%);
   -ms-transform: translate(-50%, -50%);
   transform: translate(-50%, -50%);
   text-align: center;
}

你好，世界
.覆盖{
位置：绝对位置；
排名：0；
底部：0；
左：0；
右：0；
不透明度：0；
身高：继承；
宽度：继承；
过渡：放松；
}
.image_容器_1{
位置：相对位置；
}
.img_容器_1:悬停。覆盖{
不透明度：1；
}
img{
最小高度：400px；
最大高度：420px；
显示器：flex；
右侧填充：2米；
}
.文本{
颜色：白色；
字体大小：20px；
位置：绝对位置；
最高：50%；
左：50%；
-webkit转换：翻译（-50%，-50%）；
-ms转换：翻译（-50%，-50%）；
转换：翻译（-50%，-50%）；
文本对齐：居中；
}

---

您可以在这里找到完整的演示：

要使用flexbox将包装中的所有内容垂直居中，您需要添加

对齐项目：居中到
.wrapper

在您的示例中，包装器也与内容的高度相匹配，因此您不会看到任何差异，除非您为
.wrapper
指定高度

您将
body
设置为
height:100%，这就是您的示例此时垂直滚动的原因。只要视图足够大，可以垂直放置滚动条的所有内容，就可以删除滚动条

调整后的CSS：

html, body {
  width: 100%;
}

body {
  margin: 2em;
}

.wrapper {
  display: flex;
  align-items: center;
  height: 500px; /* Example height */
  flex-direction: row; /* It's this by default, so you could remove this if you want */
}
img {
  min-height: 400px;
  max-height: 420px;
  padding-right: 2em;
}

我在CodePen上做了一个调整后的示例，可供参考：
最好将问题集中在自己的问题上，不要太多。有人能告诉我如何在整个水平图像库中添加边框吗？我尝试添加到包装器和图像中。当我将其添加到图像时，它沿着图像右侧向上移动，我只设置阴影x偏移。当添加到包装上时，它不会沿着厨房的长度延伸。你应该单独提出一个问题。这就是你想要的吗：