Vertical Centering

index.html

<div class="main">
  <div class="wrapper container">
    <div class="row justify-content-center">
      <div class="col-lg-6 col-md-8 col-sm-12 col-12 postcard">
        <div class="postcard-inner fiuld-container">
          <div class="row">
            <div class="col-3 col-sm-5 photo-frame">
              <img src="https://user-images.githubusercontent.com/87161/44012622-00735218-9ef3-11e8-9d20-011062317112.jpg" class="photo">
            </div>
            <div class="col-9 col-sm-7">
              <p class="stamp-heading">
                <div class="stamp-holder">
                  <div class="stamp">
                    <!-- the image -->
                    <div class="stamp-image"></div>
                  </div>

                </div>
              </p>
              <div class="content ">
                <div class="header">
                  <p>Greetings from </p>
                  <h1 class="event-name"><span class="title-bar">Bar</span><span class="title-camp">camp</span> HK 2018</h1>
                  <p>... We are Coming to town!</p>
                </div>
                <p>Date: 15 September 2018 (Sat)</p>
                <p>Venue: Station for Open Cultures, <br> 1/f Eaton Workshop
                <p>Time: 10:00am - 6:00pm</p>
                <p>: <em> Registration Link is brewing </em> :</p>
                <p class="sign-off"><img src="http://barcamp.hk/images/footer-logo.png" class="signature"></p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.min.js"></script>

style.css

@charset "UTF-8";
body {
  background-image: radial-gradient(circle farthest-corner at 10% 20%, #fdc168 0%, #fb8080 90%);
}

.main {
  height: 100vh;
  display: flex;
}

.wrapper {
  margin: auto;
}

.postcard {
  background-color: #fff;
  min-height: 20em;
  color: #333;
}

.stamp-heading {
  text-align: right;
  margin: 0;
}

.stamp {
  float: right;
  width: 60px;
  height: 72px;
  display: inline-block;
  padding: 6px;
  background: white;
  position: relative;
  -webkit-filter: drop-shadow(0px 0px 1px rgba(0, 0, 0, 0.5));
  /*The stamp cutout will be created using crisp radial gradients*/
  background: radial-gradient(transparent 0px, transparent 4px, white 4px, white);
  /*reducing the gradient size*/
  background-size: 12px 12px;
  /*Offset to move the holes to the edge*/
  background-position: -18px -18px;
}

.stamp:after {
  content: '';
  position: absolute;
  /*We can shrink the pseudo element here to hide the shadow edges*/
  left: 5px;
  top: 5px;
  right: 5px;
  bottom: 5px;
  /*Shadow - doesn't look good because of the stamp cutout. We can still move this into another pseudo element behind the .stamp main element*/
  /*box-shadow: 0 0 20px 1px rgba(0, 0, 0, 0.5);*/
  /*pushing it back*/
  z-index: -1;
}

/*Some text*/
.stamp:before {
  content: '🐾';
  position: absolute;
  bottom: -10px;
  right: -10px;
  font: bold 18px arial;
  color: white;
  opacity: 0.75;
  line-height: 100%;
  padding: 20px;
  z-index: 100;
}

.stamp-image {
  width: 100%;
  height: 100%;
  background-color: #ccc;
}

.content {
  margin-top: 2.8em;
}

.content p {
  line-height: 1.2;
}

.postcard-inner {
  padding: 1em 0;
}

.photo-frame {
  overflow: hidden;
  position: relative;
}

.photo {
  -o-object-fit: contain;
     object-fit: contain;
  height: 20em;
}

.header {
  font-size: 1em;
  font-weight: normal;
  margin-bottom: 1em;
  color: #666;
}
.header p {
  margin: 0;
}

.event-name {
  display: block;
  font-size: 1.2em;
  font-weight: normal;
  color: #474747;
  margin: 0;
}

.title-bar {
  color: #FFCC03;
  font-weight: 700;
}

.title-camp {
  color: #CC1517;
  font-weight: 400;
}

.signature {
  height: 2.4em;
  background-color: #CC1517;
  padding: 0.2em;
}

.sign-off {
  text-align: right;
  margin-bottom: 0;
}

.content p em {
  font-weight: 700;
}

style.scss

$card-height: 20em;
body {
  background-image: radial-gradient( circle farthest-corner at 10% 20%,  rgba(253,193,104,1) 0%, rgba(251,128,128,1) 90% );
}

.main { 
  height: 100vh; 
  display: flex;
}
.wrapper {
  margin: auto; 
}
.card-fx {
}
.postcard {
  background-color: #fff;
  min-height: $card-height;
  color: #333;
}
.stamp-heading {
  text-align: right;
  margin: 0;
}
// derived from https://codepen.io/orhanveli/pen/tbGJL
.stamp {  
  float: right;
	width: 60px;
	height: 72px;
	display: inline-block;
	padding: 6px;
	background: white;
	position: relative;
	-webkit-filter: drop-shadow(0px 0px 1px rgba(0,0,0,0.5));
	/*The stamp cutout will be created using crisp radial gradients*/
	background: radial-gradient(
		transparent 0px, 
		transparent 4px, 
		white 4px,
		white
	);
  
	/*reducing the gradient size*/
	background-size: 12px 12px;
	/*Offset to move the holes to the edge*/
	background-position: -18px -18px;
}
.stamp:after {
	content: '';
	position: absolute;
	/*We can shrink the pseudo element here to hide the shadow edges*/
	left: 5px; top: 5px; right: 5px; bottom: 5px;
	/*Shadow - doesn't look good because of the stamp cutout. We can still move this into another pseudo element behind the .stamp main element*/
	
  /*box-shadow: 0 0 20px 1px rgba(0, 0, 0, 0.5);*/
	/*pushing it back*/
	z-index: -1;
}
/*Some text*/
.stamp:before {
	content: '🐾';
	position: absolute;
	bottom: -10px; right: -10px;
	font: bold 18px arial;
	color: white;
	opacity: 0.75;
	line-height: 100%;
	padding: 20px;
  z-index: 100
}
.stamp-image {
  width: 100%;
  height: 100%;
  background-color: #ccc;
}
.content {
  margin-top: 2.8em;
}
.content p {
  line-height: 1.2
}
// heading etc
.postcard-inner{
  padding: 1em 0;
}
.photo-frame {
  overflow: hidden;
  position: relative;
}
.photo {
  object-fit: contain;
  height: $card-height
}
.header {
  font-size: 1em;
  font-weight: normal;
  margin-bottom: 1em;
  color: #666;
  p {
    margin: 0
  }
}
.event-name {
  display: block;
  font-size: 1.2em;
  font-weight: normal;
  color: #474747;
  margin: 0;
}
.title-bar {
    color: #FFCC03;
    font-weight: 700;
}
.title-camp {
    color: #CC1517;
    font-weight: 400;
}
.signature {
  height: 2.4em;
  background-color: #CC1517;
  padding: 0.2em;
}
.sign-off {
  text-align: right;
  margin-bottom: 0;
}
.content p em {
  font-weight: 700;
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />

vertical-centering.markdown

Vertical Centering

A Pen by Vinci on CodePen.

License.