flexbox is a good candidate for what you’re looking for.
display: flex; //make your ul element a flex element
flex-direction: column; //set the direction of the children (lis) to be column instead of row
align-self: center; //and the magic you're looking for, aligning the li's to the center
note that while looking at your pen and adding my styles, i commented out any floats and explicitly set widths/heights as that would likely mess with things. Also removed your % based margins on the body. Its best not to set margins to create a container on the body class, add a wrapping div to do that for you. Happy coding, hope this helps you!