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 change an HTML5 input’s placeholder color with CSS.

In this article, we’ll look at how to change an HTML5 input’s placeholder color with CSS.

How to change an HTML5 input’s placeholder color with CSS?

To change an HTML5 input’s placeholder color with CSS, we use the ::placeholder selector.

For instance, we write

::placeholder {
  color: #909;
}

to set the input placeholder’s color to #909.

Conclusion

To change an HTML5 input’s placeholder color with CSS, we use the ::placeholder selector.

Sometimes, we want to select the CSS parent element

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

How to select the CSS parent element?

To select the CSS parent element, we use the has selector.

For instance, we write

li:has(> a.active) {
  /*...*/
}

to select the li’s that has a elements with the active class.

Conclusion

To select the CSS parent element, we use the has selector.

Sometimes, we want to set cellpadding and cellspacing in CSS.

In this article, we’ll look at how to set cellpadding and cellspacing in CSS.

How to set cellpadding and cellspacing in CSS?

To set cellpadding and cellspacing in CSS, we set the padding and border properties.

For instance, we write

td {
  padding: 10px;
}

table {
  border-spacing: 10px;
  border-collapse: separate;
}

to add cell spacing with the border-spacing property.

border-collapse: separate; is required to apply border-spacing

And we add cell padding with the padding property for td’s.

Conclusion

To set cellpadding and cellspacing in CSS, we set the padding and border properties.

Sometimes, we want to disable the resizable property of a textarea with CSS.

In this article, we’ll look at how to disable the resizable property of a textarea with CSS.

How to disable the resizable property of a textarea with CSS?

To disable the resizable property of a textarea with CSS, we set the resize property.

For instance, we write

textarea {
  resize: none;
}

to disable resizing of the textarea with resize: none;.

Conclusion

To disable the resizable property of a textarea with CSS, we set the resize property.