尝试在绝对定位元素上使用垂直对齐中间

Question

我的滑块上的下一个和上一个箭头出现问题。滑块用于随窗口收缩和扩展。除 safari 外，所有浏览器中的一切看起来都很棒。按钮位于滑块的顶部而不是中间。

我已经尝试了我能想到的一切来解决这个问题。有什么想法吗？

这里是网站http://upperdeck.dev.warp9inc.com

这是按钮的代码。

.slideshow-wrapper .backward {
    position:absolute;
    left: 10px;
    margin-top:10%;
    background:url(../../images/infortis/super-slideshow/slideshow-arrows.png) 0 0 no-repeat;
    width:50px;
    height:50px;
}

.slideshow-wrapper .forward {
    position:absolute;
    right:10px;
    margin-top:10%;
    background:url(../../images/infortis/super-slideshow/slideshow-arrows.png) -50px 0 no-repeat;
    width:50px;
    height:50px;
}

谢谢！

Answer 1

对于绝对定位的元素，可以这样居中

top: 50%;
margin-top: -25px

这也适用于水平居中绝对定位的项目，即使父级动态改变大小也可以工作。

您将 top 和/或 left 设置为 50%，然后将 margin-top/margin-left 设置为您要居中的项目宽度的负 1/2。所以，你的 CSS 应该是这样的：

/* Make sure .slideshow-wrapper has position: relative; */  
.slideshow-wrapper .backward {
        position:absolute;
        left: 10px;
        top: 50%;
        margin-top: -25px;
        background:url(../../images/infortis/super-slideshow/slideshow-arrows.png) 0 0 no-repeat;
        width:50px;
        height:50px;
    }

    .slideshow-wrapper .forward {
        position:absolute;
        right:10px;
        top: 50%;
        margin-top: -25px;
        background:url(../../images/infortis/super-slideshow/slideshow-arrows.png) -50px 0 no-repeat;
        width:50px;
        height:50px;
    }

这样做是告诉 div 绝对定位在父元素的 50% 处，但由于它使用顶部或左侧边缘，而不是元素的中间，它不会完全居中。因此，您需要将位置向左或顶部偏移元素宽度或高度的一半，以便元素的中间位置落在其父元素的 50% 处。