简单而通用的方法是表格方法）：

[ctrv]{
    display: table !important;
}

[ctrv] > *{ /* Addressing direct descendants */
      display: table-cell;
      vertical-align: middle;
      // text-align: center; /* Optional */
}

在父标记上使用此属性（或等效的类）甚至可以使许多子标记对齐：

<parent ctrv>  <ch1/>  <ch2/>   </parent>

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

第二部分{高度：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>

这是个更好的主意。你也可以这样做

身体html格式{高度：100%；}.父级{空白：nowrap；高度：100%；文本对齐：居中；}.父项：在之后{显示：内联块；垂直对齐：中间；高度：100%；内容：“”；}.居中{显示：内联块；垂直对齐：中间；空白：正常；}<div class=“parent”><div class=“center”><p>Lorem ipsum dolor坐amet</p＞</div></div>

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）。

.element{position: relative;top: 50%;transform: translateY(-50%);}

将此小代码添加到元素的CSS属性中。太棒了。试试看！

绝对定位和拉伸

与上面的方法一样，首先将父元素和子元素上的位置分别设置为相对和绝对。从那里情况就不同了。

在下面的代码中，我再次使用了该方法来水平和垂直地居中子对象，尽管您只能使用该方法进行垂直居中。

HTML

<div id="parent">
    <div id="child">Content here</div>
</div>

CSS

#parent {position: relative;}
#child {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 50%;
    height: 30%;
    margin: auto;
}

此方法的思想是通过将上、下、右和左值设置为0，尝试使子元素延伸到所有四条边。因为我们的子元素比我们的父元素小，所以它不能到达所有的四条边。

然而，将自动设置为所有四边的边距会导致相反的边距相等，并将子div显示在父div的中心。

不幸的是，上面的方法在InternetExplorer7及以下版本中不起作用，并且像前面的方法一样，子div中的内容可能会变得太大，导致其被隐藏。