Как вертикально выровнять текст перед абсолютным элементом?

Question

Я пытаюсь вертикально выровнять средний текст, написанный в :before CSS. Я не могу понять это.

Кажется, это дубликат, но я уже пробовал все, что нашел. Возможно, я пропустил письмо, но я думаю, что этот случай еще не был рассмотрен: абсолютный элемент + перед текстом.

Вот то, что я до сих пор:

.element { 
 
    position: absolute; 
 
    top: 0; 
 
    right: 0; 
 
    left: 0; 
 
    bottom: 0; 
 
    border: 3px solid black; 
 
    border-radius: 5px; 
 
    text-align: center; 
 
    height: inherit; 
 
    background-color: rgba(0, 0, 0, 0.2); 
 
} 
 
.element:before { 
 
    content: "Some text to align vertically"; 
 
    vertical-align: middle; 
 
}

<div class="element"></div>

Answer 1

дисплей гибкого или таблица будет легко сделать:

html, 
 
body, 
 
.element { 
 
    height: 100%; 
 
    width: 100%; 
 
    margin:0; 
 
    border-collapse:collapse; 
 
    box-sizing:border-box; 
 
} 
 
.element { 
 
    position: absolute; 
 
    display: table; 
 
    top: 0; 
 
    right: 0; 
 
    left: 0; 
 
    bottom: 0; 
 
    border: 3px solid black; 
 
    border-radius: 5px; 
 
    text-align: center; 
 
    height: inherit; 
 
    background-color: rgba(0, 0, 0, 0.2); 
 
} 
 
.element:before { 
 
    content: "Some text to align vertically"; 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
}

<div class="element"></div>

прогибается

.element { 
 
    position: absolute; 
 
    display: flex; 
 
    top: 0; 
 
    right: 0; 
 
    left: 0; 
 
    bottom: 0; 
 
    border: 3px solid black; 
 
    border-radius: 5px; 
 
    text-align: center; 
 
    height: inherit; 
 
    background-color: rgba(0, 0, 0, 0.2); 
 
    align-items:center; 
 
    justify-content:center; 
 
} 
 
.element:before { 
 
    content: "Some text to align vertically"; 
 
    }

<div class="element"></div>

или

.element { 
 
    position: absolute; 
 
    display: flex; 
 
    top: 0; 
 
    right: 0; 
 
    left: 0; 
 
    bottom: 0; 
 
    border: 3px solid black; 
 
    border-radius: 5px; 
 
    text-align: center; 
 
    height: inherit; 
 
    background-color: rgba(0, 0, 0, 0.2); 
 
} 
 
.element:before { 
 
    content: "Some text to align vertically"; 
 
    margin:auto; 
 
    }

<div class="element"></div>