html - 如何让悬停时出现的文本显示在 div 的正中心(水平和垂直)

Question

我正在尝试制作一个网站，处理我通过研究 html 和 css 学到的一些东西。我试图让图像保留在容器内，但在悬停时显示为“放大”，然后在悬停时也显示文本。我有第一部分，“缩放”，但出于某种原因，我无法让文本保持居中。有几次我让它居中，但是一旦我改变屏幕分辨率或在不同的设备上尝试它就会失败。如何让文本在包含在 div 中的悬停图像中水平和垂直居中显示？我还想添加一个小的滤色器，但一旦我将文本居中，我就会弄清楚这一点。这是我正在做的事情的一个具体示例: https://www.quadlockcase.com/ -- 包含“商店”元素的部分，当您将鼠标悬停在顶部时，文本会居中显示。我似乎也无法通过检查来弄清楚。

我已经浏览 StackOverflow 很长一段时间了，不幸的是没有成功。我敢肯定那里可能有答案，但是出于某种原因，当我尝试将所有内容“缩放”在一起时，我在 div 中包含图像而该图像中包含文本的事实并没有似乎工作。我希望这在其他地方没有明显的答案，我真的只是坚持下去。 Here is a jsfiddle , 以及下面的代码

 body {
        background-color: grey; /* Color so you can see picture scale */
      }
      .box { /*container to hold items */
        width: 20%; 
        margin: 20px;
        box-sizing: border-box;
        }
      .imgBox { /*image box to contain image within the .box class */
        position: relative;
        padding: 0;
        width: 100%;
        display: inline-block;
        margin: auto;
        overflow: hidden;
        transition: all .3s ease-in-out;
      }
        .imgBox:hover { /* add a small border with a drop shadow on hover */
          filter: drop-shadow(0px 0px 0px rgba(0,0,0,.6))
          drop-shadow(0px 0px 10px rgba(0,0,0,.6));
        }
    
      .imgBox img { /*actual image within the image box, so it stays within div */
        display: block; /* no whitespace */
        transition: .3s ease-in-out;
        max-width: 100%;
        max-height: 100%;
        margin: auto;
      }
        .imgBox:hover img { /* scale image but keep it within box on hover */
          transform: scale(1.2);
        }
      .hovertext { /* text I want to appear centered on hover */
        display:none;
        clear:both;
        text-align: center;
        color:white;
        font-size: 1em;
        width: 100%;
        bottom:0;
        position:absolute;
        z-index:2;
        vertical-align: middle;
        }
        .hovertext:hover {
            display: block;
            opacity: 1;
        }
      .imgBox:hover .hovertext{ 
        display: block;
      }

    <div class="box"> 
        <div class="imgBox">
            <a href="#">
              <img src="http://lorempixel.com/400/400/" alt="lorempixel">
              <p class="hovertext">Product Name</p>
            </a>
          </div>  
      </div>

Answer 1

一个简单的修复(保留大部分现有的 HTML 和 CSS)是调整 .hovertext 的 CSS，如下所示:

.hovertext {
  /* text I want to appear centered on hover */
  display: none;
  clear: both;
  text-align: center;
  color: white;
  font-size: 1em;
  width: 100%;

  /* bottom: 0; <-- remove */
  position: absolute;
  z-index: 2;

  /* Reset margin of p to 0 to enable correct vertical centering */
  margin:0;

  /* Position from to of parent by 50% height */
  top:50%;

  /* Offset a further 50% by height of the this element's height */
  transform:translateY(-50%);

  /* vertical-align: middle; <-- remove this */
}

这是一个工作片段:

body {
  background-color: grey;
  /* Color so you can see picture scale */
}

.box {
  /*container to hold items */
  width: 20%;
  margin: 20px;
  box-sizing: border-box;
}

.imgBox {
  /*image box to contain image within the .box class */
  position: relative;
  padding: 0;
  width: 100%;
  display: inline-block;
  margin: auto;
  overflow: hidden;
  transition: all .3s ease-in-out;
}

.imgBox:hover {
  /* add a small border with a drop shadow on hover */
  filter: drop-shadow(0px 0px 0px rgba(0, 0, 0, .6)) drop-shadow(0px 0px 10px rgba(0, 0, 0, .6));
}

.imgBox img {
  /*actual image within the image box, so it stays within div */
  display: block;
  /* no whitespace */
  transition: .3s ease-in-out;
  max-width: 100%;
  max-height: 100%;
  margin: auto;
}

.imgBox:hover img {
  /* scale image but keep it within box on hover */
  transform: scale(1.2);
}

.hovertext {
  /* text I want to appear centered on hover */
  display: none;
  clear: both;
  text-align: center;
  color: white;
  font-size: 1em;
  width: 100%;
  
  /* bottom: 0; */
  position: absolute;
  z-index: 2;
  
  margin:0;
  top:50%;
  transform:translateY(-50%);
  
  
  /* vertical-align: middle; */
}

.hovertext:hover {
  display: block;
  opacity: 1;
}

.imgBox:hover .hovertext {
  display: block;
}

<div class="box">
  <div class="imgBox">
    <a href="#">
      <img src="http://lorempixel.com/400/400/" alt="lorempixel">
      <p class="hovertext">Lorem ipsum.</p>
    </a>
  </div>
</div>