在屏幕上居中显示面板

Question

我正在使用引导程序并创建面板。我试图将我的面板置于屏幕中间。它在一个容器内。

<div class="container body-content"> 
    <div class="panel panel-default col-md-6"> 
     <div class="panel-title text-center">Log in</div> 
     <div class="panel-body text-center"> 
      <h6>Use a local account to log in.</h6> 
     </div> 
    </div> 
</div> 

Answer 1

这里有一个办法：

Example Here

.container .panel { 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translateX(-50%) translateY(-50%); 
} 

如果你感兴趣的其他方法，see this answer。

Answer 2

对于像我这样的人来说，他们只是水平放置而不是垂直放置中央面板，col-xx-offset是一种将面板水平居中的快速方法。

<div class="panel panel-default col-md-6 col-md-offset-3"> 

见this答案