Centré img verticalement dans div autosize

Bonjour,

j ai un bandeau vertical en css, dans le bandeau "secondaire" j ai 3 images que j aimerai mettre au centre du bandeau verticalement et horizontalement, mon bandeau est en % et mes images aussi afin de s'adapter aux ecrans...

centré horizontalement c est bon et il prend pas le vertical

merci pour votre aide

page html

<div id="global">
<div id="entete">
<a href="index.php">Accueil</a>
<a href="presentation.php"><span class="espace2">Présentation</span></a>
<a href="reception.php"><span class="espace2">Salons de réception</span></a>
<a href="adresse.php"><span class="espace2">Adresse</span></a>
<a href="traiteur.php"><span class="espace2">Traiteur</span></a>
<a href="informations.php"><span class="espace2">Informations</span></a>
</div>

	<div id="centre">
        <div id="centre-bis">

<div id="navigation">
<a href="presentation.php?hide=15">Vidéo d'accueil<br></a>
<a href="presentation.php?hide=16">Galerie photos</a>
</div>
<div id="secondaire">
<p><img src="https://www.000webhost.com/migrate?static=true" /> 
<p><img src="https://www.000webhost.com/migrate?static=true" /> 
<p><img src="https://www.000webhost.com/migrate?static=true" />
</div>


<div id="principal"> 

<?php
if (isset($_GET['hide']) && $_GET['hide'] == 15) {
include 'video.php';
}
?>
<?php
if (isset($_GET['hide']) && $_GET['hide'] == 16) {
include 'photo.php';
}
?>
</div>
</div>
</div>
	
<div id="pied"> 2014 © Christophe Dradin. Proudly by Elipz
</div>
</div>

feuille css

.espace1{
  margin-left:1em
}

.espace2{
  margin-left:1.4em
}
.espace3{
  margin-left:40em
}
.espace4{
  margin-left:2em
}
/* Général */ 
body {
	color: #F0E39E;
	background: #EAECD6;
	background-image:url(https://www.000webhost.com/migrate?static=true
	background-repeat:no-repeat;
	background-size: 20% 80%;

}
a {
	color: #000000;
	text-decoration: none;
}

/* Navigation */
#navigation {
	color: #BECD32;
	background: #62584F;
	font-family: Gabriola;
	font-size: 25px;
}

#navigation a {
	color: #BECD32;
	text-decoration: none;
}

/* Contenu principal */
#principal {
	color: #62584F;
	background: #EAECD6;
	font-family: Gabriola;
	font-size: 25px;
}

/* Contenu secondaire */
#secondaire {
	color: #BECD32;
	background: #62584F;
	font-family: Gabriola;
	font-size: 25px;
}

#secondaire p {                                       //// ici
    text-align: center;
    text-align: middle;
} 

#secondaire img { 
width:50%; 
height:20%;
} 

/* Entete */
#entete {
	color: #000000;
	background: #BECD32;
	font-family: Gabriola;
}

#navigation a {
	color: #BECD32;
	text-decoration: none;
}

/* Pied */
#pied {
	color: #000000;
	background: #BECD32;
	font-family: Gabriola;
	font-size: 2em;
}

#pied p { 
text-align:middle; 
} 

#pied img { 
width:25px; 
height:25px;
position:auto;
} 




/* --- POSITIONNEMENT --- */

/* Page */
body {
	padding: 6% 15%;
}
#global {
	width: 95%;
	max-width: 90em;
	min-width: 550px;
	min-height: 300px;
	margin-left: 1%;
	margin-right: 15%;
}

/* En-tête */
#entete {
	height: 2%;
	padding-top: 0%;
	padding-bottom: 3%;
        padding-left:20px;
        min-height:7px;
}


/* Bloc central */
#centre-bis {
	width: 100%;
	overflow: hidden;
}

/* Menu de navigation */
#navigation {
	float: left;
	width: 15%;
	height: 80%;
	padding-top: 2%;
	padding-bottom: 1%;
	padding-left: 2%;
	padding-right: 1%;
	min-height: 300px;

}

/* Contenu secondaire */
#secondaire {
	float: right;
	width: 18%;
	height: 80%;
	padding-top: 1%;
	padding-bottom: 2%;
	min-height: 300px;
}

/* Contenu principal */
#principal {
	margin-left: 21%;
	margin-right: 26%;
	padding-top: 2%;
	padding-bottom: 1%;
	min-height: 300px;
}



/* Pied de page */
#pied {
	height: 2%;
	padding-top: 0%;
	padding-bottom: 3%;
        padding-left:5%;
        min-height:7px;
}