How to center text vertically in a Bootstrap

Currently there are many ways to make editing How to center text vertically in a Bootstrap The following ways I have applied in Bootstrap the easiest to use.

Way 1: Progress by CSS and HTML
Add css

.vertical-align-center {
  display: table;
  height: 100%;
  width: 100%;
}

.vertical-align-center .valign-center {
  display: table-cell;
  vertical-align: middle;
  height: 100%;
}
.vertical-align-center > div {
  padding-bottom: 200em;
  margin-bottom: -200em;
}
.overflow-hidden {
  overflow: hidden;
}

Add html

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div style="background-color:blue;" class="row overflow-hidden">
  <div style="background-color:orange; height:1000px;" class="col-xs-8 vertical-align-center">
    <div style="background-color: green;" class="valign-center">
      <p>First small paragraph with other elements in it</p>
      <p>Second small paragraph with other elements in it</p>
    </div>
  </div>
  <div class="col-xs-4">
    text
  </div>
</div>

way 2:
CSS

.row.flex-override {
  display: -ms-flex;
  display: -webkit-flex;
  display: flex;
  justify-content: space-around;
}
.row.flex-override > .vertical-align-center {
  display: -ms-flex;
  display: -webkit-flex;
  display: flex;
}
.row.flex-override .vertical-align-center .valign-center {
  align-self: center;
}

HTML

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="row flex-override">
  <div class="col-xs-8 vertical-align-center" style="background-color: green;">
    <div class="valign-center">
      <p>First small paragraph with other elements in it</p>
      <p>Second small paragraph with other elements in it</p>
    </div>
  </div>
  <div class="col-xs-4" style="background-color:orange;">
    <img src="//lorempixel.com/500/500/cats/1" class="img-responsive" />
  </div>
</div>

Way 3: In Bootstrap 4, you can add the align-self-center class to the column div to vertically center it.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
  <div class="col-8 align-self-center">
    <p>First small paragraph with other elements in it</p>
    <p>Second small paragraph with other elements in it</p>
  </div>
  <div class="col-4">
    <img src="//lorempixel.com/150/300/" class="img-responsive" />
  </div>
</div>

Note : align-self-center