Centrer Verticalement dans un div

<style type="text/css">
#divdiapo { text-align:center; font-weight:bold; }
.photoprevious 	{ font-weight:bold;cursor:pointer;font-size:2em; vertical-align:middle; }
.photonext { font-weight:bold;cursor:pointer;font-size:2em; }

.photosL { width:70%; display: none; }
.photosH { width:50%; display: none; }
</style>


<script type="text/javascript" >
function next(gen){
	var numero = parseInt(document.gen.zonedebut.value);
	var numerofin = parseInt(document.gen.zonefin.value);
	if (numero < numerofin){
		document.getElementById(+numero).style.display = "none";
		var numero = ++numero ;
		document.gen.zonedebut.value= +numero;
		document.getElementById(+numero).style.display = "inline";
	}
	else if (numero == numerofin){
		document.getElementById(+numero).style.display = "none";
		var numero = 0;
		document.gen.zonedebut.value= +numero;
		document.getElementById(+numero).style.display = "inline";
	}
}
function previous(gen){
	var numero = document.gen.zonedebut.value;
	if (numero > 0){
		document.getElementById(+numero).style.display = "none";
		var numero = --numero ;
		document.gen.zonedebut.value= +numero;
		document.getElementById(+numero).style.display = "inline";
	}
}
</script>


<div id="divdiapo">
	<p>Diaporama</p>
	<div>
		<span class="photoprevious" onclick="previous(gen);"> <  </span>
		<img src="images/rencontres/2019/20190428_102500.jpg" id="0" alt="" style="width:70%;" />
		<img src="images/rencontres/2019/20190428_102610.jpg" class="photosL" id="1" alt="" " />
		<img src="images/rencontres/2019/20190428_102723.jpg" class="photosH" id="2" alt="" />
		<span class="photonext" onclick="next(gen)">></span>
	</div>
	<FORM name="gen">
		<INPUT type="hidden" name="zonedebut" value="0">
		<INPUT type="hidden" name="zonefin" value="2">
	</FORM>
</div>