How to center vertically the text within a multiple div - html

Question

I've been trying hard for the past hours to switch from the left column to the right one. I mean, I'm trying to center vertically the text div inside the grey div.
I would love to get some of your help. I've read a lot of tutorials and forum answer but didn't get the expected result yet.
Any advice is more than welcome :)
HTML Code :
.box-key-message{
height: 240px;
position: relative;
background-color: #eeeeee;
border-radius: 10px;
}
.box-key-message div {
display:inline-block;
vertical-align:middle;
padding: 20px;
text-align: justify;
}
.box-key-message span {
font-weight:bold;
font-size:16px;
color: #D5420F;
}
<div class="col-lg-4 col-lg-offset-1">
<div class="box-key-message">
<div>
<span> Gratuit</span>
<br /><br />
Notre service, qui vous permet d’accéder à des centaines d’étudiants, est complètement gratuit pour vous.
<br /><br />
Vous ne rémunérez que l’étudiant. Un acompte de 15% vous sera demandé au moment de la mise en relation. Le reste sera payé une fois tous les succès de votre mission atteints !
</div>
</div>
<br /><br />
<div class="box-key-message">
<div>
<span>Simple et Rapide</span>
<br /><br />
Remplissez cette page en 5 minutes pour publier une mission à tous nos étudiants.
<br /><br />
Vous recevrez alors le CV des étudiants intéressés par votre mission. Une fois l’étudiant sélectionné, la mission commence.
</div>
</div>
<br /><br />
<div class="box-key-message">
<div>
<span>Sans engagement</span>
<br /><br />
Les étudiants des Grandes Ecoles qui vous répondent sont qualifiés, motivés, disponibles et réactifs.
<br /><br />
Si malgré tout aucun profil ne vous correspond, vous n’avez aucune obligation de recruter un étudiant et poster la mission aura été gratuit.
</div>
</div>
<br /><br />
<div class="box-key-message">
<div>
<span>Et pour payer l’étudiant ?</span>
<br /><br />
L’étudiant vous facturera la prestation en direct à la fin de la mission.
</div>
</div>
</div>

Answer 1

You could use the inner div as a table-cell, then vertical-align works on it.
I also improved your HTML, instead of using two line breaks, it's better to use paragraphs or margin.
<div class="col-lg-4 col-lg-offset-1">
<div class="box-key-message">
<div>
<span> Gratuit</span>
<p>Notre service, qui vous permet d’accéder à des centaines d’étudiants, est complètement gratuit pour vous.</p>
<p>Vous ne rémunérez que l’étudiant. Un acompte de 15% vous sera demandé au moment de la mise en relation. Le reste sera payé une fois tous les succès de votre mission atteints !</p>
</div>
</div>
<div class="box-key-message">
<div>
<span>Simple et Rapide</span>
<p>Remplissez cette page en 5 minutes pour publier une mission à tous nos étudiants.</p>
<p>Vous recevrez alors le CV des étudiants intéressés par votre mission. Une fois l’étudiant sélectionné, la mission commence.</p>
</div>
</div>
<div class="box-key-message">
<div>
<span>Sans engagement</span>
<p>Les étudiants des Grandes Ecoles qui vous répondent sont qualifiés, motivés, disponibles et réactifs.</p>
<p>Si malgré tout aucun profil ne vous correspond, vous n’avez aucune obligation de recruter un étudiant et poster la mission aura été gratuit.</p>
</div>
</div>
<div class="box-key-message">
<div>
<span>Et pour payer l’étudiant ?</span>
<p>L’étudiant vous facturera la prestation en direct à la fin de la mission.</p>
</div>
</div>
</div>
.box-key-message {
height: 240px;
background-color: #eeeeee;
border-radius: 10px;
margin-bottom: 2em;
display: table;
}
.box-key-message div {
display: table-cell;
vertical-align:middle;
padding: 20px;
text-align: justify;
}
.box-key-message span {
font-weight:bold;
font-size:16px;
color: #D5420F;
}
DEMO

Answer 2

Just use display: table; table-layout: fixed; for the parent div and display: table-cell; vertical-align: middle; for every child. See how it works below. You probably also will need to specify width: 100% to both of them.
.box-key-message{
height: 240px;
position: relative;
background-color: #eeeeee;
border-radius: 10px;
display: table;
table-layout: fixed;
}
.box-key-message div {
display:inline-block;
vertical-align:middle;
padding: 20px;
text-align: justify;
display: table-cell;
vertical-align: middle;
width: 100%;
}
.box-key-message span {
font-weight:bold;
font-size:16px;
color: #D5420F;
}
<div class="col-lg-4 col-lg-offset-1">
<div class="box-key-message">
<div>
<span> Gratuit</span>
<br /><br />
Notre service, qui vous permet d’accéder à des centaines d’étudiants, est complètement gratuit pour vous.
<br /><br />
Vous ne rémunérez que l’étudiant. Un acompte de 15% vous sera demandé au moment de la mise en relation. Le reste sera payé une fois tous les succès de votre mission atteints !
</div>
</div>
<br /><br />
<div class="box-key-message">
<div>
<span>Simple et Rapide</span>
<br /><br />
Remplissez cette page en 5 minutes pour publier une mission à tous nos étudiants.
<br /><br />
Vous recevrez alors le CV des étudiants intéressés par votre mission. Une fois l’étudiant sélectionné, la mission commence.
</div>
</div>
<br /><br />
<div class="box-key-message">
<div>
<span>Sans engagement</span>
<br /><br />
Les étudiants des Grandes Ecoles qui vous répondent sont qualifiés, motivés, disponibles et réactifs.
<br /><br />
Si malgré tout aucun profil ne vous correspond, vous n’avez aucune obligation de recruter un étudiant et poster la mission aura été gratuit.
</div>
</div>
<br /><br />
<div class="box-key-message">
<div>
<span>Et pour payer l’étudiant ?</span>
<br /><br />
L’étudiant vous facturera la prestation en direct à la fin de la mission.
</div>
</div>
</div>

Answer 3

You can use display: table; width:100%; on .box-key-message, and display: table-cell on the div within it in. You want to use the table css hack because tables support vertical-align: middle while regular divs do not.
HTML:
<div class="row">
<div class="col-lg-4 col-lg-offset-1">
<div class="box-key-message">
<div>
<p><strong> Gratuit</strong></p>
<p>Notre service, qui vous permet d’accéder à des centaines d’étudiants, est complètement gratuit pour vous.</p>
<p>Vous ne rémunérez que l’étudiant. Un acompte de 15% vous sera demandé au moment de la mise en relation. Le reste sera payé une fois tous les succès de votre mission atteints !</p>
</div>
</div>
<div class="box-key-message">
<div>
<p><strong>Simple et Rapide</strong></p>
<p>Remplissez cette page en 5 minutes pour publier une mission à tous nos étudiants.</p>
<p>Vous recevrez alors le CV des étudiants intéressés par votre mission. Une fois l’étudiant sélectionné, la mission commence.</p>
</div>
</div>
<div class="box-key-message">
<div>
<p><strong>Sans engagement</strong></p>
<p>Les étudiants des Grandes Ecoles qui vous répondent sont qualifiés, motivés, disponibles et réactifs.</p>
<p>Si malgré tout aucun profil ne vous correspond, vous n’avez aucune obligation de recruter un étudiant et poster la mission aura été gratuit.</p>
</div>
</div>
<div class="box-key-message">
<div>
<p><strong>Et pour payer l’étudiant ?</strong></p>
<p>L’étudiant vous facturera la prestation en direct à la fin de la mission.</p>
</div>
</div>
</div>
</div>
CSS:
.box-key-message{
height: 240px;
display:table;
background-color: #eeeeee;
border-radius: 10px;
margin-bottom: 20px;
width: 100%;
}
.box-key-message div {
display:table-cell;
vertical-align: middle;
padding: 20px;
text-align: justify;
}
.box-key-message strong {
font-size:16px;
color: #D5420F;
}
As a sidenote, you overused break tags a little too much. You can get the spacing you want for the content inside the .box-key-message divs by using paragraph tags around your content. To separate out the box-key-message blocks so they won't touch each other, you can add a margin-bottom: 20px; (or whatever spacing you prefer) to .box-key-message in your css.
See this codepen for an example.