twitter-bootstrap 在屏幕上居中面板

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/28356264/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-21 22:17:09  来源:igfitidea点击:

center a panel on screen

csstwitter-bootstrap

提问by user1186050

I'm using bootstrap and creating a panel. I'm trying to center my panel in the middle of the screen. It's inside a container.

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

<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>

回答by Josh Crozier

Here is one approach:

这是一种方法:

Example Here

示例在这里

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

If you're interested in other approaches, see this answer.

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

回答by Anupam

For others, like me, who came here looking to center panel only horizontally and not vertically, col-xx-offset is a quick way to center a panel horizontally.

对于其他像我一样来到这里只是希望将面板水平居中而不是垂直居中的人来说,col-xx-offset 是一种将面板水平居中的快速方法。

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

See thisanswer

看到这个答案