Center text horisontaly and verticaly in an image - html

Question

I want to change the text on the photos to be in the center, both horisontal and vertical. It's currently centered horisontally, but not vertically. Remember it's a "hover-effect background image"-thing.
HTML
<a href="portrait">
<div id="imagebox1" class="imagebox columns">
<div id="image1">
<span id="plus">Portrett</span>
</div>
</div>
</a>
<a href="nature">
<div id="imagebox3" class="imagebox columns">
<div id="image3">
<span id="plus">Natur</span>
</div>
</div>
</a>
<a href="various">
<div id="imagebox2" class="imagebox columns">
<div id="image2">
<span id="plus">Annet</span>
</div>
</div>
</a>
CSS
#imagebox1, #imagebox2, #imagebox3 {
float: left;
background-repeat: no-repeat;
margin-right: 0px;
}
#imagebox1 {
background:url(../images/sample_image400.jpg);
background-size: cover;
margin-left: 0px;
}
#imagebox2 {
background:url(../images/sample_image.jpg);
background-size: cover;
}
#imagebox3 {
background:url(../images/sample_image.jpg);
background-size: cover;
}
#image1, #image2, #image3 {
background:rgba(255,255,255,.75);
text-align:center;
padding-top: 100%;
opacity:0;
-webkit-transition: all 0.3s ease-in-out;
}
#imagebox1:hover #image1 {
opacity:1;
}
#imagebox2:hover #image2 {
opacity:1;
}
#imagebox3:hover #image3 {
opacity:1;
}
.images img {
margin-left: 0px;
padding-bottom:30px;
padding-top:35px;
}
#imagebox1, #imagebox2, #imagebox3 {
margin-bottom: 30px;
}
#plus {
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: 200;
color: #282828;
font-size: 20px;
text-transform: uppercase;
}
JSFIDDLE
http://jsfiddle.net/8abCY/

Answer 1

Ok...I think your HTML structure is too complex for what you are trying to do.
So I've simplified it.
JSfiddle DEmo
The image is content and so it should be in the HTML not a background-image in the CSS which gives us, simply
HTML
<a href="portrait" class="imagebox">
<img src="http://www.ginakorslund.no/images/sample_image400.jpg" alt=""/>
<span class="plus">Portrett</span>
</a>
Note I'be changed a lot of the ID out for a more generic class. you can still give each anchor link an individual ID if you want but the classes mean that the CSS is re-usable.
CSS
.imagebox {
position: relative; /* required */
text-align: center;
display: block;
}
.plus {
position: absolute;
top:50%; /* top and left values put the span's top left corner exactly */
left:50%; /* halfway down and across the screen but do **not** center it */
-webkit-transform:translate(-50%, -50%);
transform:translate(-50%, -50%);
/* move the span back exactly half it's own width and height */
/* and now it's centered regardless of width & height */
display: none; /* hide it until hovered */
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: 200;
color: #282828;
font-size: 20px;
text-transform: uppercase;
color:white;
}
.imagebox:hover .plus {
display: block; /* show it when the link is hovered */
}

Answer 2

try...
#plus {
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: 200;
color: #282828;
font-size: 20px;
text-transform: uppercase;
position: relative;
margin-top: auto;
margin-bottom: auto;
}