Centering images horizontally and vertically within a div of vary width and heighth - css

Question

I need to center a forward and back arrow on either side of an image within a larger div. The div's width and height vary according to the size of the image.
I have a live version of my work so far here: http://danapaigetrentlage.com/cfsa-comps/lff-aboutgoods.html
And here's a jsfiddle to play with: http://jsfiddle.net/thwackukulele/4zHyd/
Though I don't know how much use that will be without the images linked in.
You'll see the forward and backward arrows are at the top of the blue area to either side of the image. I want them to be centered horizontally and vertically within this blue area.
I know that I am using a lot of positioning, and if there's an all around better way to attack this layout, please let me know. This is the best I could come up with. I am eventually handing these layouts off to a developer who is adding database CMS functionality. So my code doesn't need to be perfect, it just has to illustrate my intentions so that he can understand.
Thanks for any help in advance!!

Answer 1

.framewrap-fb{ position:relative; }
.rightarrow, .leftarrow{ position:absolute; top:50%; margin-top:-32px; width:64px; height:64px}
.leftarrow{left:0}
.rightarrow{right:0}

Answer 2

Not sure I understand the question, thats alot of code to read through, maybe only post the code on the focus area.
Try:
.wrapper{
position:relative;
}
.left_arrow{
position:absolute;
left:0;
top:50%;
}
.right_arrow{
position:absolute;
right:0;
top:50%;
}

Answer 3

The solution is to absolute position the links to the div at 50% top and margin-top of negative half of the height of the link so:
http://jsfiddle.net/elclanrs/JKqnm/
html:
<div>
<img />
<a id="next"></a>
<a id="prev"></a>
</div>
css:
div {
position: relative;
height: 300px; /* Set size */
width: 500px;
background: blue;
}
#prev, #next {
position: absolute;
width: 24px;
height: 24px;
top: 50%;
margin-top: -12px;
background: red;
}
#prev {
left: -48px;
}
#next {
right: -48px;
}