In the example that was provided the div.hero-content-area is centered both vertically and horizontally because it is a flex item inside a flex container. The parent container probably uses ‘display: flex’ and also ‘justify-content: center’ to align the item horizontally, and in order to align it vertically it probably uses ‘align-items: center’.