center a panel on screen

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: "center a panel on screen">Log in</div>
      <div class="panel-body text-center">
           <h6>Use a local account to log in.</h6>


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.