非常简单的解决方案，我在我的项目中多次使用它：

源代码

.welcome_box{
    height: 300px;
    display: flex;
    justify-content: center;
    align-content: center;
    flex-direction: column;
    border: solid 1px #dadada;
}

<div class="welcome_box">Hello Friends</div>

输出：

谢谢你提出这个问题。很高兴分享。

这些天（我们不再需要InternetExplorer6-8），我只会使用CSS display:table（或display:flex）来解决这个问题。

表：.vcenter（.v中心）{显示：表格；背景：#eee；/*可选的*/宽度：150px；高度：150px；文本对齐：居中；/*可选的*/}.vcenter>：第一个子级{显示：表格单元格；垂直对齐：中间；}<div class=“vcenter”><p>这是我的文本</p></div>

弯曲：.vcenter（.v中心）{显示：柔性；对齐项目：居中；高度：150px；对齐内容：中心；/*可选的*/背景：#eee；/*可选的*/宽度：150px；}<div class=“vcenter”><p>这是我的文字</p></div>

对于较旧的浏览器：

这是（实际上是）我最喜欢的解决方案（简单且非常受浏览器支持）：

第二部分{边距：5px；文本对齐：居中；显示：内联块；}.vcenter（.v中心）{背景：#eee；/*可选的*/宽度：150px；高度：150px；}.vcenter:之前{内容：“”；显示：内联块；高度：100%；垂直对齐：中间；最大宽度：0.001%；/*为了防止文本换行，你不应该注意到它*/}.vcenter>：第一个子级{显示：内联块；垂直对齐：中间；最大宽度：99.999%；}<div class=“vcenter”><p>这是我的文字</p></div><div class=“vcenter”><h4>这是我的文本<br/>文本</br/>文本</h4></div><div class=“vcenter”>＜div＞<p>这是我的</p><p>文本</p></div></div>

根据Adam Tomat的回答，我们准备了一个JSFiddle示例来对齐div中的文本：

<div class="cells-block">    
    text<br/>in the block   
</div>

通过在CSS中使用display:flex：

.cells-block {
    display: flex;
    flex-flow: column;
    align-items: center;       /* Vertically   */
    justify-content: flex-end; /* Horisontally */
    text-align: right;         /* Addition: for text's lines */
}

另一个例子和一篇博客文章中的一些解释。

在现代浏览器中，正确的方法是使用Flexbox。

有关详细信息，请参阅此答案。

请参阅下面的一些在旧浏览器中工作的旧方法。

CSS中的垂直居中http://www.jakpsatweb.cz/css/css-vertical-center-solution.html

文章摘要：

对于CSS2浏览器，可以使用display:table/display:table单元格来居中显示内容。

JSFiddle也提供了示例：

div｛border:1px实心绿色；｝<div style=“display:table；height:400px；溢出：隐藏；”><div style=“display：表格单元格；垂直对齐：中间；”>＜div＞在现代IE8+和其他版本中，一切都是垂直居中的。</div></div></div>

可以使用#将旧浏览器（Internet Explorer 6/7）的黑客行为合并到样式中，以隐藏新浏览器的样式：

div｛border:1px实心绿色；｝<div style=“display:table；height:400px；#position:relative；overflow:hidden；”><div样式=“#位置：绝对；#顶部：50%；显示：表格单元格；垂直对齐：中间；”><div style=“#position:relative；#top:-50%”>一切都是垂直居中的</div></div></div>

使用CSS网格为我做到了：

.外部{背景色：灰色；宽度：10rem；高度：10rem；显示：栅格；对齐项目：中心；}.内部{背景色：#FF8585；对齐自身：中心；}<div class='outer'><div class='inner'>所容纳之物</div></div>

有几个技巧可以在div的中心显示内容或图像。有些答案非常好，我也完全同意。

CSS中的绝对水平和垂直居中

http://www.css-jquery-design.com/2013/12/css-techniques-absolute-horizontal-and-vertical-centering-in-css/

有10多种技术和示例。现在取决于你喜欢哪一个。

毫无疑问，显示：表格；display：table Cell是一个更好的技巧。

以下是一些好技巧：

技巧1-使用display：table；显示：表格单元

HTML

<div class="Center-Container is-Table">
  <div class="Table-Cell">
    <div class="Center-Block">
        CONTENT
    </div>
  </div>
</div>

货物积载与系固安全操作规则

.Center-Container.is-Table { display: table; }
.is-Table .Table-Cell {
  display: table-cell;
  vertical-align: middle;
}
.is-Table .Center-Block {
  width: 50%;
  margin: 0 auto;
}

技巧2-通过使用显示：内联块

HTML

<div class="Center-Container is-Inline">
  <div class="Center-Block">
     CONTENT
  </div>
</div>

CSS代码

.Center-Container.is-Inline {
  text-align: center;
  overflow: auto;
}

.Center-Container.is-Inline:after,
.is-Inline .Center-Block {
  display: inline-block;
  vertical-align: middle;
}

.Center-Container.is-Inline:after {
  content: '';
  height: 100%;
  margin-left: -0.25em; /* To offset spacing. May vary by font */
}

.is-Inline .Center-Block {
  max-width: 99%; /* Prevents issues with long content causes the content block to be pushed to the top */
  /* max-width: calc(100% - 0.25em) /* Only for Internet Explorer 9+ */
}

技巧3-使用位置：相对；位置：绝对

<div style="position: relative; background: #ddd; border: 1px solid #ddd; height: 250px;">
  <div style="width: 50%; height: 60%; overflow: auto; margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; background: #ccc; text-align: center;">
    <h4>ABSOLUTE CENTER, <br/>
WITHIN CONTAINER.</h4>
    <p>This box is absolutely centered, horizontally and vertically, within its container</p>
  </div>
</div>