Html 如何使文本垂直居中？

我一直在努力使我的content div中的文本垂直居中，我被难住了。该容器包括1个带标题的div和1个带内容的div

我尝试过以下元素：

vertical-align: middle;

还玩显示器/定位，但我没有任何运气

当前CSS如下所示：

.content-wrapper {
  height: 100vh;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: left;
  text-align: left;
  -ms-flex-flow: column nowrap;
  flex-flow: column nowrap;
  color: #000;
  font-family: Montserrat;
  text-transform: none;
  -webkit-transform: translateY(40vh);
  transform: translateY(40vh);
  will-change: transform;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transition: all 1.7s cubic-bezier(0.22, 0.44, 0, 1);
  transition: all 1.7s cubic-bezier(0.22, 0.44, 0, 1);
  padding-top: 10%;
  padding-right: 25px;
  padding-left: 30px;
  float: right;
  width: 35%;
  background-color: #f0f7fc;
}

柔性箱 允许您垂直对齐文本，而无需将

div

与固定的

高度对齐。现在所有现代浏览器都支持它

查看Flexbox的所有问题和解决方法。大多数是用于Internet Explorer的

display: flex;
align-items: center;


div{
宽度：50px；
高度：100px；
显示器：flex；
对齐项目：居中；
边框：1px纯黑；
}

试验
flex版本垂直居中，但也水平居中。我需要在一个垂直居中的容器中左对齐文本。如果您使用flex，那么为什么不看看属性的含义，以便您了解它的工作原理，您可以轻松地将文本垂直居中并左对齐