How can I center display: flex items in the vertical direction with in their parent div?

Question

According to this css-tricks it should be simple:

https://css-tricks.com/snippets/css/a-guide-to-flexbox

using

align-items: center;

However I created a fiddle using this method and the above property appears to do nothing ...

https://jsfiddle.net/8emptL3k/5/

Answer 1

You should display: flex property to the #container div.

#container{
  height: 50px;
  border: 1px solid red;
  display: flex;
  align-items: center;
}

Answer 2

    #container{
    height: 50px;
    border: 1px solid red;
    align-items: center;
    display:flex;
    flex-direction:  column ;
    }

since you want to display in virtical direction we are using flex-direction:column else remove it if you want it in horizontal direction and display:flex is required if you want to flex to work