How to vertically align floating divs with CSS?

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

For instance, we write

<div id="wrapper">
  <div id="left-div">
    <ul>
      <li>One</li>
      <li>Two</li>
    </ul>
  </div>
  <div id="right-div">...</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;.