Question

鉴于以下设计元素，我试图在html中包含图像，以便可以使用css过渡（悬停效果）操纵不透明度。

到目前为止，这是我的解决方案：http://codepen.io/roachdesign/pen/VeQKJK/

这里的主要缺点是我使用手动垂直居中（绝对/顶部：40％），这在缩小浏览器时变得明显。

使用绝对定位时，是否可以使用flexbox或table应用垂直居中？

HTML

<div class="badge-container">
  <a href="">
    <div class="badge">
        <img src="http://www.placehold.it/400x400/FF9999">
        <h2><strong>Cumberland</strong>County</h2>
    </div>
  </a>
  <a href="">
    <div class="badge">
        <img src="http://www.placehold.it/400x400/99FF99">
        <h2><strong>Dauphin</strong>County</h2>
    </div>
  </a>
  <a href="">
    <div class="badge">
        <img src="http://www.placehold.it/400x400/9999FF">
        <h2><strong>Lancaster</strong>County</h2>
    </div>
  </a>
  <a href="">
    <div class="badge">
        <img src="http://www.placehold.it/400x400/9F9F99">
        <h2><strong>Lebanon</strong>County</h2>
    </div>
  </a>
  <a href="">
    <div class="badge">
        <img src="http://www.placehold.it/400x400">
        <h2><strong>York</strong>County</h2>
    </div>
  </a>
</div>

SCSS

.badge-container {display:flex; flex-direction:row; 
  .badge {position:relative;}
  h2 {position:absolute;
      top:36%;
      left:0; 
      right:0;
      text-align:center;
      strong {display:block;}
  }
}

img {max-width:100%;}

Answer 1

您可以使用转换

h2 {
  position:absolute;
  top:50%;
  left:50%; 
  text-align:center;
  transform: translateX(-50%) translateY(-50%);
}

不要忘记清除h2的边距这是working demo

Answer 2

你也可以继续使用flex for h2

.badge-container,
h2 {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.badge-container .badge {
  position: relative;
}
.badge h2 {
  margin: 0;
  position: absolute;
  justify-content: center;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  flex-direction:column;
}
.badge-container h2 strong {} img {
  max-width: 100%;
}

<div class="badge-container">
  <a href="">
    <div class="badge">
      <img src="http://www.placehold.it/400x400/FF9999">
      <h2><strong>Cumberland</strong>County</h2>
    </div>
  </a>

  <a href="">
    <div class="badge">
      <img src="http://www.placehold.it/400x400/99FF99">
      <h2><strong>Dauphin</strong>County</h2>
    </div>
  </a>
  <a href="">
    <div class="badge">
      <img src="http://www.placehold.it/400x400/9999FF">
      <h2><strong>Lancaster</strong>County</h2>
    </div>
  </a>
  <a href="">
    <div class="badge">
      <img src="http://www.placehold.it/400x400/9F9F99">
      <h2><strong>Lebanon</strong>County</h2>
    </div>
  </a>
  <a href="">
    <div class="badge">
      <img src="http://www.placehold.it/400x400">
      <h2><strong>York</strong>County</h2>
    </div>
  </a>
</div>

http://codepen.io/anon/pen/BjYQvv

水平和水平在HTML图像上垂直居中文本（绝对定位）

2 个答案: