Move element/section on an HTML - html

Question

I'm making a website and I've got this sort of a menu that looks like this:
Image
I want the lightblue part with the buttons to be centered vertically and to the right in the grey part not below Pepito123.
The code for the HTML is this:
#fotoUsuario {
width: 150px;
height: 150px;
border-radius: 10px;
}
.contenedor {
display: flex;
overflow: hidden;
}
.perfilUsuario {
background-color: rgb(211, 211, 211);
width: 80%;
height: 500px;
margin: auto;
border-radius: 10px;
padding: 15px;
}
.menuPerfil {
height: 80%;
width: 20%;
float: right;
background-color: rgb(173, 216, 230);
border-left: 1px solid rgb(0, 0, 0);
}
<section class="contenedor">
<div class="perfilUsuario">
<img id="fotoUsuario" src="http://coyotechronicle.net/wp-content/uploads/2015/02/facebook-logo.jpeg">
<h1>Pepito123</h1>
<div>
<ul class="menuPerfil">
<li><button type="button">Plan de Estudio</button></li>
<li><button type="button">Materias</button></li>
<li><button type="button">Otra cosa</button></li>
</ul>
</div>
</div>
</section>
JSFiddle

Answer 1

.perfilUsuario > div{
position: relative;
left: 40%;
}
Do this, it'll center the div. Next time you should explain your problem better

Answer 2

I moved the class of menuPerfil from the <ul> element to it's parent div and then slightly modified the height and width of menuPerfil from 30% to 40% respectively.
See Fiddle

Answer 3

In general, you can position the child element vertically within the parent element using positioning and transform. See the example:
.parent {
width: 100%;
height: 300px;
background-color: grey;
position: relative;
}
.child {
width: 100px;
height: 50px;
background-color: red;
position: relative;
top: 50%; /*This will push the child down from the TOP of the parent element. However, origin point of the child is set to its top (imagine top border laying perfectly at the middle vertically), therefore we need the next step, which is: */
transform: translateY(-50%); /* This will push the element UP for the half of it's height. */
margin: 0 auto; /* If you want to center it horizontally as well. */
<div class="parent">
<div class="child"></div>
</div>
Note: it's important that both parent and child are positioned for this to work.
I gave the general/universal example instead of applying it to your specific code, because I also (like few others) cannot say I perfectly understand how exactly did you want to position your elements in particular, but hopefully this will help you. Also, I'd target the div which contains the UL, and not the UL itself.
Let me know if you need help applying this solution to your problem. Good luck.