how to vertically align both image and text?

Question

So I need to center both image and text vertically. however, something goes wrong in my code and I don't know why. i can get the text to be centered, however, the image is not I have no clue why. any ideas? this is my code so far.

.container {
  height: 300px;
  width: 300px;
  position: relative;
  border: 3px solid black;
  background-color: transparent;
}

.center {
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.settings {
  width: 100px;
  height: 100px;
}

.connecttext {
  color: #000;
  text-align: center;
}

<div class="container">
  <div class="center">
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/How_to_use_icon.svg/1200px-How_to_use_icon.svg.png" class="settings">
    <p class="connecttext"><strong>Connect</strong><br>Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text
    </p>
  </div>
</div>

Answer 1

Add this to .center :

.center {
    display: flex;
    place-items: center;
    ...
}