使用 jquery 插件进行垂直对齐答案

【问题标题】：Vertical alignment with a jquery plugin使用 jquery 插件进行垂直对齐
【发布时间】：2014-11-22 07:30:00
【问题描述】：

我最近尝试在我的项目中使用插件粒子ground。

但是我有一个问题：里面的内容垂直对齐。

这是jsfiddle 中的一个示例。

<div id="particlebg">

        <div class="container">
          <div class="row">
            <div class="col-sm-12 home-title">
              <h1>An example of vertical align</h1>
              <h3>An example of vertical align</h3>
              <button class="btn-lg btn-alt">Download</button>
            </div>
          </div>
        </div>

      </div>  <!-- end #particlebg -->

有人知道怎么做吗？

在此先感谢大家

【问题讨论】：

“内部内容的垂直对齐方式” - 里面的内容似乎在不断移动……你到底要对齐什么……？
感谢回复...我要对齐div容器
div 容器的父级高度为100%，因此没有剩余空间可以对齐。请更新问题，解释您到底要做什么......
您好，很抱歉，我不明白您的意思。我想将 div.container 垂直居中在#particlebg
#particlebg 和容器的高度相同。那么你将如何垂直居中对齐呢？

标签： jquery css twitter-bootstrap-3 vertical-alignment

【解决方案1】：

#particlebg {
    position: relative;
    height: 350px;
    margin-bottom: 50px;
    background: red;
    overflow: hidden;
}


#particlebg .row  {
    position: absolute;
    width: 100%;
    left: 50%;
    top: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: #ffffff;
    text-transform: uppercase;
    font-size: 1.2em;
}

给你。很确定这就是你想要的。

【讨论】：