Cannot vertical align absolute span - html

Question

I'm trying to positioned the navigation in the middle position of the container, but I haven't can, yet. I'm using span for navigation.
I have positioned the parent containers as relative how is recommended and then assign position to span using top, right and left.
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>
I put demo on jsfiddle.
How can I position vertical middle this span?
Demo

Answer 1

You have a few issues in your CSS. For one, when using position:absolute it removes the element out of the flow of the document. Both your image and text are being positioned absolute. so there is no height or width being registering in your document. That's why top: 50% isn't working. So start by removing the positioning from .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
}
Now top:50% will work and the words "left" and "right" will seemingly be centered. There's a few more things:
Next, your div containers are display: block by default so they take the width of the document. Since your image is not width:100% the container is too large and the word "right" will disappear because the image isn't wide enough. (check out your demo and user4429928's answer - make the screen large and "right" will seem to disappear). You can set the container to display: inline-block so it wraps the image:
.container{
display: inline-block;
}
Now, I would remove the absolute positioning from .anterior and .siguiente and add the positioning to the parent instead and float the children:
.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{
float: right;
text-align: right;
}
Calling top:50% does not actually center an element, it positions it 50% from it's top. In this case becasue your text has very little height, it looks ok, but if you added height: 200px or something, you would see that it's not actually centered. To correct this you can use:
transform: translateY(-50%);
Now your content is centered and within its parent. And to fix the image rotating issue you can set the image thats fading out to absolute and the one that comes in to static:
FIDDLE

Answer 2

try the demo : http://jsfiddle.net/17ow14kf/2/
img{
max-width:600px;
}
.slider {
height: 210px;
margin: 0 auto;
position: relative;
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;
}
.flechas-nav {
height: 50px;
margin-top: -25px;
position: absolute;
top: 50%;
width: 100%; color:#fff;
}
.flechas-nav .anterior {
left: 0;
top: 50%;
}