Centered Elementwith More!

Notice how the Header’s text is centered but the button next to it is not part of the centering algorithm. Where things get interesting is when the screen gets so narrow that the content no longer centers; everything still fits and looks good.

.centeredWithAddition {
    display: flex;
    justify-content: center;
    align-items: center;
}
.centeredWithAddition::before, .centeredWithAddition>*:last-child {
    content: '';
    flex-shrink: 1;
    flex-grow: 1;
    flex-basis: 3em;
}
.centeredWithAddition>*:nth-child(1) {
    flex-shrink: 1;
    flex-grow: 0;
    text-align: center;
}