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

您可以使用absolute centering技巧，如下所示

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

在绝对定位的div内垂直和水平对齐锚

1 个答案:

Demo