在引导列中垂直居中div

Question

昨天我一直在尝试垂直居中“LinkedIn Connexion”div，但没有成功......

我尝试了几分钟前学到的“display：table”技术，但它仍然无效......你能帮我找到问题吗？上周我学习了Bootstrap，并且我遇到了所有“垂直居中”问题。

.div[title="Connexion LinkedIn"] {
    display: table;
    width: 100%;
    table-layout: fixed;
}

#linkedin-block {
    display: table-cell;
    vertical-align: middle;
    Background-color: #eceded;
    padding: 30px;
    border-radius: 10px;
    text-align: center;
}

  <div class="col-lg-4 col-lg-offset-2" title="Connexion LinkedIn">
   <div id="linkedin-block">
    <h4>Connectez-vous via LinkedIn</h4>
    <a href="<%= url_for connexion_linkedin_path %>"> <%= image_tag "linkedin.png", :style => "width:50px; margin:20px" %></a>
   </div>
  </div>

----------- SpaceBeers＆amp;加勒特评论---------------------

我已经尝试了所有的建议，但是它们都没有起作用......

@SpaceBeers，您可以在下面的照片中看到，您的建议存在问题。由于自举，它接缝线“顶部：50％;”没有考虑到。

@Garrett，你的帮助做了不同的事情，但我还没有解决这个问题。 ：S

我现在认为这是一个由Bootstrap引起的问题，因为我正在使用它：       

Answer 1

这些天你可以vertical align anything very easily。

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

http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/

Answer 2

我不确定它是否是正确的答案，但我无法对其进行评论，因为我没有足够的声誉所以请 don＆ ＃39;给我-1投票。

您是否尝试过删除dot＆＃34;。＆＃34;在css之前的div？

.div[title="Connexion LinkedIn"] {
    display: table;
    width: 100%;
    table-layout: fixed;
}

变成：

div[title="Connexion LinkedIn"] {
    display: table;
    width: 100%;
    table-layout: fixed;
}

因为 div不是等级。它对我有用，但我无法在你的代码容器div中看到，所以我不确定。

另请查看this site。它非常有用，因为你可以看到CSS中的这个功能真的坏了。

希望它会有所帮助。 ：）