Vertically Centering content with Flexbox CSS

Struggling with vertically centering content using CSS ?

In this video, you will learn a quick and easy way to vertically center content using CSS3 flexbox.

đź”” Subscribe for more videos like this :

:where – CSS pseudo selector

The :where() pseudo selector in CSS is functionally identical to the :is() psuedo selector in that it takes a comma-separated list of selectors to match against, except that where :is() takes the most specific among them as the specificity of that whole part, the specificity of :where() is always zero (0).

main :where(h1, h2, h3) {
color: green;

Matches as if you wrote that selector like this:

main h1, main h2, main h3 {
color: green;

:visited – CSS pseudo selector

The :visited pseudo-class selector can change some of the styling on an anchor link (a) element if the user’s browser has already visited the link. It’s meant to help users distinguish the difference between links they have and haven’t visited.

For Example:

a:visited {
color: darkgray;

Universal – CSS class selector

The Universal Selector is the * in CSS. Literally the asterisk character. It is essentially a type selector that matches any type. Type meaning an HTML tag like div, body, button, or literally any of the others.

For Example:

margin: 0;
padding: 0;

*.component { }

The specificity of those is exactly the same, as the universal selector hold no specificity value at all.

:user-invalid : CSS pseudo class

The :user-invalid is a CSS pseudo-class that is under proposal in the CSS Selectors Level 4 working draft that selects a form element based on whether the value—as entered by a user—is valid when checked against the what is specified as an accepted value in the HTML markup after the end user has interacted with the form beyond that input.