April 2018
Beginner
368 pages
7h 37m
English
To make that happen, we'll use the new CSS property display: flex. CSS flexbox is very practical because it allows you to position element very easily. Centering, ordering, and aligning is made very easy with flexbox. If you can handle this new property, I guarantee you'll be a killer in CSS.
In our case, we want our .container to be centered vertically. To do that, we'll target the class and add these properties:
#hero .container { display: flex; align-items: center; height: 700px;}
By adding #hero before .container, we're targeting only elements with the class .container inside #hero. We don't want all .container to have the same properties: