Html 内联块div的内容垂直居中

我试图水平和垂直地将div的内容置于中心。我找到了一些解释它的线程，但它从来都不适合我的代码

另一个div（.container）中有3个居中div（.block），该div（.container）也居中，但在屏幕上。块的内容没有垂直居中。我试图使用行高，但我丢失了一些文本（块外）

这是我的密码：

.container {
    width: 70%;
    margin: 10px auto;
    position: relative;
    text-align: center;
    border: 1px solid black;
}

.block {
  background-image: -webkit-linear-gradient(150deg, #D7D7D7, #979797);
  background-image: -o-linear-gradient(150deg, #D7D7D7, #979797);
  background-image: linear-gradient(240deg, #D7D7D7, #979797);
  border-radius: 10px;
  height: 100px;
  width: 100px;
  display:inline-block;
  margin: 10px;
  padding: 10px;
  vertical-align: middle;
  line-height: 1.5;
}

<div class="container">
    <div class="block">Hello</div>
    <div class="block">Everybody</div>
    <div class="block">Would like to center it please</div>
</div>

.container{
宽度：70%；
利润率：10px自动；
位置：相对位置；
文本对齐：居中；
边框：1px纯黑；
}
.街区{
背景图像：-webkit线性渐变（150度，#D7D7D7，#9797）；
背景图像：-o线性梯度（150度，#D7D7D7，#9797）；
背景图像：线性梯度（240度，#D7D7D7，#9797）；
边界半径：10px；
高度：100px；
宽度：100px；
显示：内联块；
利润率：10px；
填充：10px；
垂直对齐：中间对齐；
线高：1.5；
}
你好
每个人
请把它放在中间好吗

我试着把内容放在一个p标签里，这样更好，但还是不居中

---

谢谢。

您可以使用flex，在容器和容器中的项目上，使用如下所示的设置来实现这一点。在这种情况下，每个容器的文本内容将自动视为弹性项，这使得居中成为可能

.container{
宽度：70%；
利润率：10px自动；
文本对齐：居中；
边框：1px纯黑；
显示器：flex；
证明内容：中心；
}
.街区{
背景图像：-webkit线性渐变（150度，#D7D7D7，#9797）；
背景图像：-o线性梯度（150度，#D7D7D7，#9797）；
背景图像：线性梯度（240度，#D7D7D7，#9797）；
边界半径：10px；
高度：100px；
宽度：100px；
利润率：10px；
填充：10px；
垂直对齐：中间对齐；
显示器：flex；
对齐项目：居中；
证明内容：中心；
}

你好
每个人
请把它放在中间好吗

您可以使用flex，在容器和容器中的项目上，使用如下所示的设置来实现这一点。在这种情况下，每个容器的文本内容将自动视为弹性项，这使得居中成为可能

.container{
宽度：70%；
利润率：10px自动；
文本对齐：居中；
边框：1px纯黑；
显示器：flex；
证明内容：中心；
}
.街区{
背景图像：-webkit线性渐变（150度，#D7D7D7，#9797）；
背景图像：-o线性梯度（150度，#D7D7D7，#9797）；
背景图像：线性梯度（240度，#D7D7D7，#9797）；
边界半径：10px；
高度：100px；
宽度：100px；
利润率：10px；
填充：10px；
垂直对齐：中间对齐；
显示器：flex；
对齐项目：居中；
证明内容：中心；
}

你好
每个人
请把它放在中间好吗