将一个面板放在屏幕上

Question

我正在使用bootstrap并创建一个面板.我正试图将我的面板放在屏幕中间.它在一个容器内.

<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

这是一种方法:

这里的例子

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

如果您对其他方法感兴趣,请参阅此答案.