您可以使用以下代码段作为参考。这对我来说就像一种魅力：

html，正文{高度：100%；边距：0；填充：0；宽度：100%；}正文{显示：表格；}.居中文本{文本对齐：居中；显示：表格单元格；垂直对齐：中间；}<div class=“居中文本”><h1>是的，这是我的登录页</h1><h2>正在建设中，即将到来</氢气></div>

上述代码段的输出如下：

绝对定位和拉伸

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

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

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中的内容可能会变得太大，导致其被隐藏。

这是使用Flexbox的另一个选项。

#集装箱{显示：柔性；高度：200px；背景：橙色；}.儿童{边距：自动；}<div id=“container”><div class=“child”><span>Lorem ipsum dolor坐在amet consectetur adipiscing elit。鼹鼠，尼莫</span></div></div>

后果

这里有一篇关于CSS居中的好文章。过来看。

您还可以使用以下财产。

display: flex; 
align-content: center; 
justify-content : center;

您可以在CSS中使用定位方法：

检查此处的结果。。。。

HTML格式：

<div class="relativediv">
  <p>
    Make me vertical align as center
  </p>
</div>

CSS:

.relativediv {
    position: relative;
    border: 1px solid #DDD;
    height: 300px;
    width: 300px
}
.relativediv p {
    position: absolute;
    top: 50%;
    transfrom: translateY(-50%);
}

满足所有垂直对齐需求！

声明此Mixin：

@mixin vertical-align($position: relative) {
  position: $position;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

然后将其包含在元素中：

.element{
    @include vertical-align();
}