Текст центра по вертикали и по горизонтали без абсолютного позиционирования

Question

Прежде всего, он отличается от других вопросов, потому что я не могу использовать position: absolute;, как обычно использовал из-за моего плагина jQuery (я не использую этот плагин в примере, но я должен сделать position: relative; для внутреннего стола).

JSFIDDLE: https://jsfiddle.net/h8ywumbk/

HTML:

<div id="table"> 
    <div id="inside-table" > 
    <span>Hello</span> 
    </div> 
</div> 

CSS:

#table { 
    width: 100%; 
    height: 100px; 
    border: solid 1px black; 
    background-color: transparent; 
} 
#inside-table { 
    position: relative; 
    width: 98%; 
    height: 80px; 
    background-color: transparent; 
    border: solid 1px black; 
    margin: 0 auto; 
    margin-top: 10px; 
} 
#inside-table span { 
    position: relative; 
    top: 50%; 
    transform: translateY(-50%); 
} 

Я пытаюсь центрировать текст (ни одной строки) по вертикали и горизонтально на столах. Какие-либо предложения?

Answer 1

flexbox Просто используйте

#table { 
 
    width: 100%; 
 
    height: 100px; 
 
    border: solid 1px black; 
 
    background-color: transparent; 
 
} 
 
#inside-table { 
 
    position: relative; 
 
    width: 98%; 
 
    height: 80px; 
 
    background-color: transparent; 
 
    border: solid 1px black; 
 
    margin: 0 auto; 
 
    margin-top: 10px; 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
} 
 
#inside-table span { 
 
    
 
}

<div id="table"> 
 
    <div id="inside-table"> 
 
    <span>Hello</span> 
 
    </div> 
 
</div>

Answer 2

Попробуйте это:

.table { 
    display: table; 
    width: 100%; 
} 
.td { 
    display: table-cell; 
    vertical-align: middle; 
} 

<div class="table"> 
    <div class="td"> 
    text 
    </div> 
    <div class="td"> 
    <img alt="" src="http://url style="width: 120px; height: 148px;" /> 
    </div> 
</div> 

Answer 3

Я получил его по центру, как это:

#inside-table span { 
    position: relative; 
    top: 50%; 
    left: 50%; 
} 

Вы всегда можете столкнуться с процентами, если хотите, чтобы они были сдвинуты в том или ином направлении