无法垂直对齐绝对跨度

Question

我正在尝试将导航定位在容器的中间位置，但我还不能。我正在使用span 进行导航。

我已将父容器定位为相对推荐的方式，然后使用顶部、右侧和左侧将位置分配给 span。

img{
    max-width:600px;
}
.slider{
    position: relative;
    margin: 0 auto;
    /*overflow: hidden;*/
    width: 100%;
}
.slider ul{
    /*white-space: nowrap;*/
    list-style: none;
    padding: 0;
    position: relative;
}

.slider ul li{
    margin-right: -4px;
    width: 100%;
    position: absolute;
    display: none;
    top: 0;
    left: 0;
}

.slider ul li.active{
    display: list-item;
}

/*Navegacion*/
.flechas-nav .anterior, .flechas-nav .siguiente{
	position: absolute;
	cursor: pointer;
}

.flechas-nav .anterior {
	
	top: 50%;
}

.flechas-nav .siguiente{
	right: 0;
	top: 50%;
}
.flechas-nav span {
	height: 100%;
	width: 10%;
	opacity: 0;
	position: absolute;
	z-index: 900;
}

.slider:hover .flechas-nav span {
	opacity: 1;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
        <div class="slider">
            <ul class="slider-contenedor">
                <li class="slide active">
                    <img class="img-responsive" src="http://i.imgur.com/Khgz4Qd.jpg" alt="">
                    
                </li>
                <li class="slide">
                    <img class="img-responsive" src="http://i.imgur.com/Dc3XS7w.jpg" alt="">
                    
                </li>
                <li class="slide">
                    <img class="img-responsive" src="http://i.imgur.com/aVzLCnM.jpg" alt="">
                </li>
            </ul>
			<div class="flechas-nav">
				<span class="anterior">Left</span>
				<span class="siguiente">Right</span>
			</div>
			</div>
        </div>
    </div>

我在jsfiddle上放了demo。

我怎样才能把这个span放在垂直中间？

Demo

Answer 1

您的 CSS 存在一些问题。一方面，当使用position:absolute 时，它会从文档流中删除元素。您的图像和文本都被绝对定位。因此您的文档中没有注册高度或宽度。这就是top: 50% 不起作用的原因。所以先从.slider ul li中删除定位

.slider ul li{
   margin-right: -4px;
   width: 100%;
   /*position: absolute;*/ //remove
   display: none;
   /*top: 0;*/ //not needed anymore
   /*left: 0;*/ //not needed anymore
}

现在top:50% 将起作用，“左”和“右”这两个词似乎会居中。还有一些事情：

接下来，您的 div 容器默认为 display: block，因此它们占用文档的宽度。由于您的图像不是width:100%，因此容器太大并且“正确”一词会因为图像不够宽而消失。 （查看您的演示和 user4429928 的答案 - 使屏幕变大，“正确”似乎会消失）。您可以将容器设置为display: inline-block，以便包装图像：

.container{
   display: inline-block;
}

现在，我将从.anterior 和.siguiente 中删除绝对定位，并将定位添加到父级并浮动子级：

.flechas-nav{
   width: 100%;
   position: absolute;
   top: 50%;
   color: #FFF;
   transform: translateY(-50%); //read note below about this
}

.flechas-nav .anterior {
   float: left;
}

.flechas-nav .siguiente{ 浮动：对； 文本对齐：右； }

调用top:50% 实际上并不使元素居中，而是将其定位在距顶部50% 的位置。在这种情况下，因为您的文本高度很小，看起来还可以，但是如果您添加了height: 200px 或其他内容，您会发现它实际上并没有居中。要更正此问题，您可以使用：

transform: translateY(-50%);

现在您的内容居中并位于其父级内。要解决图像旋转问题，您可以将淡出的图像设置为absolute 和进入static 的图像：

FIDDLE