Sometimes, we want to center horizontally and vertically with CSS Flexbox.

In this article, we’ll look at how to center horizontally and vertically with CSS Flexbox.

How to center horizontally and vertically with CSS Flexbox?

To center horizontally and vertically with CSS Flexbox, we set flex-direction to column to make the main axis vertical.

Then we set justify-content to center to center the items vertically and set align-items to center to center them horizontally.

To do this, we write

<div id="container">
  <div class="box" id="bluebox">
    <p>DIV #1</p>
  </div>

  <div class="box" id="redbox">
    <p>DIV #2</p>
  </div>
</div>

to add some nested divs.

Then we write

#container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 300px;
}

.box {
  width: 300px;
  margin: 5px;
  text-align: center;
}

to make the outer div a flex container with display: flex;.

Then we align the child divs to be centered vertically and horizontally with

flex-direction: column;
justify-content: center;
align-items: center;

We set the height so that flex-direction: column will be applied.

Conclusion

To center horizontally and vertically with CSS Flexbox, we set flex-direction to column to make the main axis vertical.

Then we set justify-content to center to center the items vertically and set align-items to center to center them horizontally.

Sometimes, we want to remove the space between inline or inline-block elements with CSS.

In this article, we’ll look at how to remove the space between inline or inline-block elements with CSS.

How to remove the space between inline or inline-block elements with CSS?

To remove the space between inline or inline-block elements with CSS, we can use flexbox.

For instance, we write

<p>
  <span> Foo </span>
  <span> Bar </span>
</p>

to add a p element with 2 spans.

Then we style them by writing

p {
  display: flex;
}

span {
  width: 100px;
  font-size: 30px;
  color: white;
  text-align: center;
}

We make the p element a flex container with display: flex.

This will also remove the space between the child elements, which are the spans.

Then we style the span’s text with by changing the font size, color, and alignment.

Conclusion

To remove the space between inline or inline-block elements with CSS, we can use flexbox.

Sometimes, we want to select parent element with CSS.

In this article, we’ll look at how to select parent element with CSS.

How to select parent element with CSS?

To select parent element with CSS, we can use the has pseudo-class.

For instance, we write

li:has(> a.active) {
  /* styles to apply to the li tag */
}

to select the li that has the anchor element that has the active class.

We use > to get the direct children.

Conclusion

To select parent element with CSS, we can use the has pseudo-class.

Sometimes, we want to allow scroll but hide scrollbar with CSS.

In this article, we’ll look at how to allow scroll but hide scrollbar with CSS.

How to allow scroll but hide scrollbar with CSS?

To allow scroll but hide scrollbar with CSS, we select the ::-webkit-scrollbar pseudo-element.

For instance, we write

::-webkit-scrollbar {
  display: none;
}

to hide the scrollbar by selecting ::-webkit-scrollbar and set the display property to none.

Conclusion

To allow scroll but hide scrollbar with CSS, we select the ::-webkit-scrollbar pseudo-element.

Sometimes, we want to change link color of the current page with CSS.

In this article, we’ll look at how to change link color of the current page with CSS.

How to change link color of the current page with CSS?

To change link color of the current page with CSS, we set the color and background-color properties.

For instance, we write

.currentLink {
  color: #640200;
  background-color: #000000;
}

to set the text color of the link with the currentLink class to #640200.

And we set the background color to #000000.

Conclusion

To change link color of the current page with CSS, we set the color and background-color properties.