html - How to align a span element inside a div? -

this question has answer here:

• how vertically center <span> inside div? [duplicate] 5 answers

update duplicated question: not same question since can not set height of containter div.

how horizontally , vertically align span element inside div.

the div resposive element, can takes several sizes. span has not set height nor width

<div class="the-div">    <span class="the-span" >span here</span> </div> 

i tried with:

.the-span{top: 50%; text-align: center} 

i don't want use js this.

capture:

you can transform position thusly:

html,  body {    width: 100%;    height: 100%;  }  div,  span {    width: 50%;    height: 50%;    border: 1px solid;    display: block;    position: relative;  }  span {    transform: translatey(-50%) translatex(-50%); /* <--offset top/left half own height/width */    left: 50%; /* position half way within containing div */    top: 50%; /* position half way within containing div */  }

<div>    <span>    </span>  </div>