<div class="container">
  <section class="horizontal-center-wrapper">
    <h1 class="big-heading">Horizontal</h1>
    <div class="horizontal-inline-element">
      <h3>1. Inline element (like text or button..)</h3>
      <div class="border-wrapper horizontal-inline-element-center">
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p> <button>Submit</button>
      </div>
    </div>
    <!-- End horizontal-inline-element-->

    <div class="horizontal-block-element">
      <h3>2. Block element (div)</h3>
      <div class="border-wrapper horizontal-block-element-center">
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
      </div>
    </div>
    <!-- End horizontal-block-element-->
  </section>
  <!-- End horizontal-center-wrapper -->

  <section class="vertical-center-wrapper">
    <h1 class="big-heading">Vertical</h1>
    <h3>3. Vertical Anything</h3>

    <div class="wrap-row">
      <div class="wrap-col">
        <div class="text-wrap">
          <h1>
            <a href="#">Pizza</a>
          </h1>
          <p>
            <a href="#">Pizza is a flatbread generally topped with tomato sauce and cheese and baked in an oven</a>
          </p>
        </div>
        <div class="wrap-background backstretch" style="background-image: url(https://upload.wikimedia.org/wikipedia/commons/a/a3/Eq_it-na_pizza-margherita_sep2005_sml.jpg)"></div>
      </div>
      <div class="wrap-col">
        <div class="text-wrap">
          <h1>
            <a href="#">Macaron</a>
          </h1>
          <p>
            <a href="#">A macaron is a French sweet meringue-based confection made with egg white</a>
          </p>
        </div>
        <div class="wrap-background backstretch" style="background-image: url(https://cdn.pixabay.com/photo/2017/08/01/11/05/macaron-2564535_960_720.jpg)"></div>
      </div>
      <div class="wrap-col">
        <div class="text-wrap">
          <h1>
            <a href="#">Rolled Cake</a>
          </h1>
          <p>
            <a href="#">A thin pumpkin cake, rolled around in a white cream filling, then in nuts. Can be frozen and served chilled</a>
          </p>
        </div>
        <div class="wrap-background backstretch" style="background-image: url(https://images.pexels.com/photos/709835/pexels-photo-709835.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260)"></div>
      </div>
    </div>
  </section>
  <!-- End vertical-center-wrapper -->
</div>
<!-- End container -->

<!-- Original Repository: https://github.com/trungk18/Centering-in-CSS-Horizontal-and-Vertical -->
/*Common CSS*/

body {
  padding: 0 0 5em;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

a {
  text-decoration: none;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

.container {
  max-width: 60em;
  margin: 0 auto;
}

.border-wrapper {
  border: 3px solid #ee6d6d;
}

.big-heading {
  font-family: "Open sans", sans-serif;
  font-weight: 300;
  font-size: 2em;
  line-height: 120%;
}

.backstretch {
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  position: relative;
}
/*End Common CSS*/
/*Main CSS*/

.horizontal-inline-element-center {
  text-align: center;
  padding: 10px;
}

.horizontal-block-element-center {
  max-width: 40em;
  margin: 0 auto;
  padding: 10px;
}

.wrap-row {
  overflow: auto;
}

.wrap-col {
  float: left;
  width: 33.333333%;
  position: relative;
}

.wrap-col::before {
  position: absolute;
  content: "";
  height: 100%;
  width: 100%;
  z-index: 1;
  background: rgba(128, 128, 128, 0.4);
}

.wrap-background {
  min-height: 250px;
}

.text-wrap {
  position: absolute;
  top: 50%;
  transform: translate(0, -50%);
  width: 100%;
  z-index: 1;
  text-align: center;
}

.text-wrap a {
  color: #fff;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.