CSS3柔性接线盒有一个小小的魔力：

/*重要*/部分{显示：柔性；显示：-webkit flex；}第p节{/*关键部件*/边距：自动；}/*不重要，着色和UI*/部分{高度：200px；宽度：60%；边距：自动；边框半径：20px；边框：3px实心橙色；背景色：金色；}第p节{文本对齐：居中；font-family:Cantarell，Calibri；字体大小：15px；背景色：黄色；边框半径：20px；填充：15px；}<章节><p>我是一个居中的盒子<br/>Flexbox很棒！</p></section>

提示：如果要将文本居中，请将上面标记为“关键部件”的行替换为以下行之一：

仅垂直：边距：自动0；仅水平：边距：0自动；

正如我注意到的，这个技巧也适用于网格（即display:grid）。

这很简单，也很短：

.块{显示：表格行；垂直对齐：中间；}.平铺{显示：表格单元格；垂直对齐：中间；文本对齐：居中；宽度：500px；高度：100px；}<div class=“body”><span class=“tile”>你好，中间世界！：）</span></div>

您可以尝试以下基本方法：

第二部分{高度：100px；线条高度：100px；文本对齐：居中；边框：2px虚线#f69c55；}＜div＞你好，世界！</div>

但它只适用于单行文本，因为我们将行的高度设置为与包含框元素相同的高度。

更通用的方法

这是垂直对齐文本的另一种方式。此解决方案适用于单行和多行文本，但仍需要固定高度的容器：

第二部分{高度：100px；线条高度：100px；文本对齐：居中；边框：2px虚线#f69c55；}跨度{显示：内联块；垂直对齐：中间；线高度：正常；}＜div＞<span>你好，世界</span></div>

CSS只是调整＜div＞的大小，通过将＜div＞线的高度设置为等于其高度来垂直居中对齐＜span＞，并使＜span＞成为具有垂直对齐：中间的内联块。然后，它将＜span＞的线高度设置回正常值，因此其内容将在块内自然流动。

模拟表显示

这里还有另一个选项，它可能在不支持display:table和display:tablecell（基本上只有InternetExplorer7）的旧浏览器上不起作用。使用CSS，我们模拟表行为（因为表支持垂直对齐），HTML与第二个示例相同：

第二部分{显示：表格；高度：100px；宽度：100%；文本对齐：居中；边框：2px虚线#f69c55；}跨度{显示：表格单元格；垂直对齐：中间；}＜div＞<span>你好，世界</span></div>

使用绝对定位

该技术使用绝对定位的元素，将顶部、底部、左侧和右侧设置为0。这在《粉碎杂志》的一篇文章中有更详细的描述，《CSS中的绝对水平和垂直居中》。

第二部分{显示：柔性；对齐内容：中心；对齐项目：居中；高度：100px；宽度：100%；边框：2px虚线#f69c55；}＜div＞<span>你好，世界</span></div>

一种更好、更简单、更快速的方法是将CSS中的页边空白设置为45%左右：

margin-top: 45%;

你可能需要玩这个数字，但它将位于周围分区的中心。

一个非常简单和最强大的垂直对齐中心的解决方案：

.外部div{高度：200px；宽度：200px；文本对齐：居中；边框：1px实心#000；}.内部{位置：相对；顶部：50%；变换：translateY（-50%）；颜色：红色；}<div class=“outer div”><span class=“inner”>无可用数据</span></div>

尝试此解决方案：

.扩展器{位置：绝对；顶部：0px；左：0px；底部：0px；右：0px；宽度：100%；高度：100%；overflow-y：隐藏；overflow-x：隐藏；}.衬垫中心{宽度：100%；高度：100%；显示：-webkit框；显示：-moz框；显示：-ms flexbox；显示：-webkit flex；显示：柔性；-webkit盒子包：中心；-moz盒装：中心；-ms柔性包装：中心；-webkit调整内容：中心；对齐内容：中心；-webkit框对齐：居中；-moz框对齐：居中；-ms flex align:中心；-webkit对齐项目：中心；对齐项目：居中；}<div class=“EXTENDER”><div class=“PADDER-CENTER”><div contentEditable=“true”>编辑此文本</分区></div></div>

使用CSS+构建。