center-vertically

<!DOCTYPE html>
<html>
<head>
<style>
.box {
    border: 3px solid green;
    margin-bottom: 10px;
}

.center1 {
    padding: 70px 0;
    text-align: center;
}

.center2 {
    line-height: 200px;
    height: 200px;
    text-align: center;
}

.center2 p {
    line-height: 1.5;
    display: inline-block;
    vertical-align: middle;
}

.center3 { 
    height: 200px;
    position: relative;
}

.center3 p {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.center4 {
	height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
}
</style>
</head>
<body>

<div class="box center1">
  <p>Center Vertically - Using padding</p>
</div>

<div class="box center2">
  <p>Center Vertically - Using line-height</p>
</div>

<div class="box center3">
  <p>Center Vertically - Using position & transform</p>
</div>

<div class="box center4">
  <p>Center Vertically - Using flex</p>
</div>

</body>
</html>