Размер нижнего колонтитула в центре вертикально и горизонтально независимо от размера нижнего колонтитула и количества тегов

Question

Я хочу, чтобы все содержимое нижнего колонтитула в нижнем колонтитуле под id="footer-content" всегда было горизонтально и вертикально центрировано независимо от размера нижнего колонтитула и количества тегов. Если изменить размер нижнего колонтитула или добавить/удалить какой-либо тег, содержимое нижнего колонтитула должно оставаться горизонтальным и вертикальным.

#footer { 
     min-height: 100px; 
     height: 100%; 
     background-color: #f5f5f5; 
     text-align: center; 
     vertical-align: middle; 
     border-style: dashed; 
    } 

<footer id="footer"> 
    <div id="footer-content"> 
    <p>My text</p> 
    <p>My text</p> 
    </div> 
</footer> 

Answer 1

Я не совсем уверен, что вы просите, но дало height к своему ребенку, это flexbox решения обязано работать. Оба по горизонтали и вертикали:

#footer { 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    min-height: calc(100vh - 90px); <!--Arbitrary--> 
    background-color: #f5f5f5; 
    border-style: dashed; 
} 

Это важно иметь height - как уже упоминалось выше, - в противном случае вертикальное выравнивание не будет работать. Вы можете использовать множество устройств, например, px, vh, em и т. Д.