Как выровнять по центру?

Вот так

.container {
    width: 300px;
    height: 300px;
    background-color: green;
    text-align: center;
}

.container:after {
    content: '';
    height: 100%;
    vertical-align: middle;
    display: inline-block;
}

.container span {
    text-align: center;
}

Горизонтально - text-align: center родителю, а не на себя
Вертикально - поставить line-height родителю, равной высоте родителя (работает если 1 строка и известна высота родителя).
А так - https://habr.com/company/netcracker/blog/277433/