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

Question

我的 slider 上的下一个和上一个箭头有问题。 slider 被构建为随窗口收缩和扩展。除了 safari，所有浏览器的一切看起来都很棒。按钮位于 slider 的顶部而不是中间。

我已经尽我所能来解决这个问题。有什么想法吗？

这是网站 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% 处。