Flexbox - center vertically second row

Question

I'd like to position second row in the center of container, but I can't figure out how to make it. align-self works in horizontal direction only - even if flex-direction is set to "column".

.first, .second {
  height: 50px;
  width: 100%;
}

.first {
  background-color: wheat;
}

.second {
  align-self: center;
  background-color: purple;
}

.container {
  background-color: silver;
  height: 300px;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}

<div class="container">
  <div class="first">
    first
  </div>
  <div class="second">
    second
  </div>
</div>

Answer 1

Normally you could set the vertical margins of the element with the class of .second to auto to center it but, the element with the class of .first pushes the centered element down just off center. You can fix this by setting a transform: translateY(-50%) on the centered element.

.first,
.second {
  height: 50px;
  width: 100%;
}

.first {
  background-color: wheat;
}

.second {
  align-self: center;
  background-color: purple;
  margin: auto 0;
  transform: translateY(-50%);
}

.container {
  background-color: silver;
  height: 300px;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}

<div class="container">
  <div class="first">
    first
  </div>
  <div class="second">
    second
  </div>
</div>