Vertically centering content of :before/:after pseudo-elements

Question

I\'m trying to achieve something similar to this picture:

I have an im

Answer 1

I know I'm late for the party but this simple flex solution worked like a charm for me in case it helps any of you.

.main-div {
    display: flex;
    align-items: center;
}

.my-div-name:before, .my-div-name:after {
    /* This content will be vertically centered with the attributes of the main-div */
}