Html 幻灯片上的垂直和水平居中（使用视差插件）

我的CSS有点问题。基本上，我有一个网站，在其中我使用jquery视差插件使用导航栏从一张幻灯片滚动到另一张幻灯片。我希望一些内容在多张幻灯片的屏幕上水平和垂直居中，但我无法做到

第一张幻灯片中有一些文字，我已设法将其置于中心位置。我还有一张幻灯片，幻灯片顶部（屏幕左侧）有一行文字，中间有3个社交媒体图标（相当大）。这是幻灯片的“我的线框”：

我尝试过使用表格法和垂直对齐，但是当我在图标上方添加文本时，所有文本都向右移动，文本在两行上。我理解为什么会发生这种情况，但是我想不出任何方法来解决这个问题

以下是我的社交媒体幻灯片的HTML：

<div class="slide" id="slide2" data-slide="2">
        <div class="social-media">
            <div class="social-media-title">
                <h1> Social Media </h1>
            </div>
            <div class="social-media-icons facebook"></div>
            <div class="social-media-icons twitter"></div>
            <div class="social-media-icons linked-in"></div>
        </div>
        <a class="button" data-slide="3" title=""></a>
    </div><!--End Slide 2-->

这是一个

徽标尚未添加，但是如果您将鼠标悬停在其上方，它们将可见

任何帮助都将不胜感激

---

谢谢

您在第二张幻灯片上错过了显示的正确方法：表格单元格；首先从标题和图标中删除该属性：

.social-media-title {
  /*display:table-cell;   Remove this*/
}
.social-media-icons {
  /*display:table-cell;   Remove this*/
}

然后将属性设置为其容器：

.social-media {
  display:table-cell;   
  vertical-align:middle;
  text-align:center;
}

并自定义您的图标和标题：

.social-media-title {
  text-align:left;
  padding-left:40px;
}
.social-media-icons {
  display:inline-block;
}

---

演示

啊，太棒了！有没有办法把文本放在屏幕的顶部？当你放大它时，它就在图标的正上方？也许你可以用绝对位置作为标题，用相对位置作为表格单元格的上级

.social-media-title {
  text-align:left;
  padding-left:40px;
}
.social-media-icons {
  display:inline-block;
}