center a panel on screen

Question

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>

score 14 · Accepted Answer · edited May 23 '17 at 10:26

14

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.

edited May 23 '17 at 10:26

Community

1
1

answered Feb 05 '15 at 23:57

Josh Crozier

233,099
56
391
304

score 2 · Answer 2 · answered Aug 18 '17 at 11:41

2

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.

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

See this answer

answered Aug 18 '17 at 11:41

Anupam

14,950
19
67
94

center a panel on screen

2 Answers2