<div><span class="x"></span></div>
<div><span class="y"></span></div>
<div><span class="xy"></span></div>

.x, .y, .xy{
    position: relative; /* ! */
    background-color: red;
    width: 16px;
    height: 16px;
    display: inline-block;
    margin: 50px 150px;
}

.x::before, .y::before, .xy::before{
    content: 'Пример современных тенденций - современная методология разработки ';
    width: 265px;
    display: inline-block;
    background-color: blue;
    color: white;
    opacity: .5;
}

.x::before {
    position: absolute; /* ! */
    left: 50%; /* ! */ 
    margin-right: -50%; /* ! */
    transform: translate(-50%, 0); /* ! */
}

.y::before {
    position: absolute; /* ! */
    top: 50%; /* ! */
    transform: translate(0, -50%); /* ! */
}

.xy::before {
    position: absolute; /* ! */
    top: 50%; /* ! */
    left: 50%; /* ! */ 
    margin-right: -50%; /* ! */
    transform: translate(-50%, -50%); /* ! */
}