box in the center

box-in-the-center.markdown

box in the center

A Pen by Daihua Ye on CodePen.

License.

index.html

<div class="ui-content-area login-form d-flex align-items-center">
  <div class="container">
    <div class="mx-auto rounded ui-central-panel">
      
    </div>
  </div>
</div>

scripts

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>

style.scss

.ui-content-area  {
  min-height: 100%;
}

html {
  height: 100%;
}

body {
  height: 100%;
}

  .ui-central-panel {
    width: 200px;
    height: 200px;
    margin-bottom: 60px;
    padding: 60px 40px 44px 40px;
    border-radius: 10px;
    background-color: black;
    box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.2);
  }

styles

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" />