Center in containing div.

transform:translate(-50%,-50%);

by klode

HTML

<div class="container">
    <div class="child">
    </div>
</div>


<div class="hline-separator">
    <div class="box2">OR
    </div>
</div>

CSS

.container{
    position:relative;
    height: 200px;
    width: 500px;
    border:1px solid black;
    margin-bottom: 32px;
}
.child {
    position:absolute;
    top:50%;
    left:50%;
    width: 100px;
    height: 50px;
    border: 1px solid red;
    transform: translate(-50%, -50%);
}

.hline-separator{
    position:relative;
    border-top:1px solid black;
}
.box2 {
    position:absolute;
    top:0;
    left:50%;
    border: 1px solid white;
    transform: translate(0, -50%);
    padding: 0 12px 0 12px;
    background-color: white;
    color: black;
}