如何垂直对齐图像和文本？

Question

所以我需要将图像和文本垂直居中。但是，我的代码出了点问题，我不知道为什么。我可以让文本居中，但是，图像不是我不知道为什么。有任何想法吗？到目前为止，这是我的代码。

.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

将此添加到 .center :

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

Answer 2

.center {
display: flex;
justify-content: center; //for horizontal 
align-items: center; //for vertically align 
}

如何垂直对齐图像和文本？

how to vertically align both image and text?

html

css

alignment

vertical-alignment