How to vertically align floating divs with CSS?

Spread the love

To vertically align floating divs with CSS, we use flexbox.

For instance, we write

<div id="wrapper">
  <div id="left-div">
  <div id="right-div">...</div>

to add nested divs.

Then we write

#wrapper {
  display: flex;
  align-items: center;
  border: 1px solid green;

#left-div {
  border: 1px solid blue;

#right-div {
  border: 1px solid red;

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

We vertically center the inner divs with align-items: center;.

Leave a Reply

Your email address will not be published. Required fields are marked *