css - 将div在Bootstrap列中垂直居中

This question already has answers here:

How to vertically center a div for all browsers?
                                
                                    （45个答案）
                                
                        
                                4年前关闭。
            
                    
我昨天一直在尝试将“ LinkedIn Connexion” div垂直居中，但没有成功...

我尝试了几分钟前学到的“显示：表格”技术，但仍然无法正常工作。您能帮我找到问题吗？上周我已经学习了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＆Garrett评论之后---------------------

我已经尝试了所有建议，但似乎没有一个有效。

@SpaceBeers，如下图所示，您的建议存在问题。由于自举，它的接缝是“ top：50％”。不考虑在内。


@Garrett，您的帮助做了一些不同的事情，但是我仍然无法解决问题。 ：S

我现在认为这是Bootstrap的问题，因为这是我正在使用的：

最佳答案

这些天您可以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/

关于css - 将div在Bootstrap列中垂直居中，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/30126991/