在絕對位置的div中垂直和水平對齊錨點

Question

在過去的一個半小時中，我一直在努力實現自己的目標。 我彼此之間有兩個div，其中最上面的一個包含要在div中居中的錨點。 我該如何實現？

HTML：

<div class="browser-home">
    <div class="browser-bar">
        <img src="img/browser-bar.png" alt=""/>
    </div>
    <div class="browser-canvas">
       <img src="img/a2o.png" alt=""/>
       <div class="browser-hover">
           <a class="folio-link" href="#">view case study</a>
       </div>
   </div>                   

CSS：

div.browser-home {position: relative;}

div.browser-home img {
    display: block;
    margin: 0 auto;
}

div.browser-canvas {
    background: #f6f6f6;
    border: 2px solid #d6d6d6;
    max-width:1250px;
    margin: 0 auto;
}

div.browser-canvas img {
    display: block;
    margin: auto;
    padding: 5.6em;
}

div.browser-hover {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 900;
    background: rgba(0,0,0, 0.7);
    opacity: 0;
    transition: opacity 0.34s ease-in-out;
    border-radius: 5px 5px 0 0;
}

div.browser-canvas:hover div.browser-hover {
    opacity: 1;
}

Answer 1

您可以使用絕對居中技巧，如下所示

.folio-link {
  display:inline-block;
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  margin:auto;
  height:0px; /* imp */
  text-align:center;
}

演示