如何對齊div內的span元素？

Question

關於重複問題的更新：它不是相同的問題，因爲我無法設置包含div的高度。

如何在div內水平和垂直對齊span元素。

該div是resposive元素，因此它可能需要幾個大小。 跨度並沒有設置高度也不寬度

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

我嘗試：

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

我不想用JS這一點。

捕獲：

Answer 1

你可以改變它的位置正是如此：

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 by half its own height/width */ 
 
    left: 50%; /* position half way within containing div */ 
 
    top: 50%; /* position half way within containing div */ 
 
}

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