center vertically div inside bootstrap grid - html

Question

I would center a div inside another div vertically.
I have tried using table cell as mentioned in some answers in the site but that does not work I always get the div in top
CSS
.height1 {
height:60px;
line-height:60px
}
.row {
border: 1px solid black;
}
.indicator {
width :20px;
height:20px;
background-color: black;
vertical-align: middle
}
.badge {
display:inline-block;
}
.parent {
display: table-cell;
}
HTML
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-md-8 height1"> TEXTE</div>
<div class="col-md-4 parent">
<div class="badge indicator">testing</div>
</div>
</div>
</div>
Here's a demo

Answer 1

See the updated snippet below.
.height1, .parent {
line-height:60px
}
.row {
border: 1px solid black;
}
.indicator {
height:20px;
background-color: black;
vertical-align: middle
}
.badge {
display:inline-block;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-xs-8 col-md-8 height1"> TEXTE</div>
<div class="col-xs-4 col-md-4 parent">
<div class="badge indicator">testing</div>
</div>
</div>
</div>

Answer 2

HTML
<div class="parent">
<div class="child"></div>
</div>
By using the following method you can get that approach. And it will be better solution to maintain the div's.
.parent {
width: 100px;
height: 100px;
background-color: yellow;
position: relative;
}
.child {
height: 50px;
width: 50px;
background-color: blue;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}