CSS定心通過內部元件的左上角

我試圖使用CSS居中的內部元件，以及由於某種原因，內部元件是基於左上角定心，而不是它的中心：http://codepen.io/anon/pen/WvxeEo CSS定心通過內部元件的左上角

HTML：

<div class="topic"> 
<span class="title-box">hello!</span> 
</div>

CSS：

.topic { 
background-color: #84BACE; 
    border: 1px solid #e8e8e8; 
    width:500px; 
    height:500px; 
position: relative; 
} 

.title-box { 
    background-color: #000; 
    color: #fff; 
    font-size: 60px; 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%);" 
}

有沒有一種方法來設置它，這樣它的正確中心？內部元素將是未知的寬度/高度，因爲它是動態文本。

謝謝！

來源

2015-05-15 hudsonian

您的瀏覽器不支持'transform：translate（-50％，-50％）'。 – Oriol

啊，對，你是......我在Chrome中試過它，它工作。奇怪，因爲我使用Safari 8.05。那麼，如果'transform：translate（-50％，-50％）'在某些現代瀏覽器中不起作用，那麼最好的解決方案是什麼？ – hudsonian

試試這個 - http://codepen.io/sergdenisov/pen/ZGOzrr：

.topic { 
    background-color: #84BACE; 
    border: 1px solid #e8e8e8; 
    width:500px; 
    height:500px; 
    position: relative; 
} 

.title-box { 
    background-color: #000; 
    color: #fff; 
    font-size: 60px; 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    -webkit-transform: translate(-50%, -50%); 
    -ms-transform: translate(-50%, -50%); 
    transform: translate(-50%, -50%); 
}

來源

2015-05-15 17:46:46

完全合作 - 謝謝！所以我只需要那裏額外的一點CSS for Safari。（只要它允許我接受這個答案。） – hudsonian

@hudsonian使用http://caniuse.com爲將來。 –

謝謝，謝爾蓋。我確實接受了......出於某種原因，我剛剛被阻止接受它幾分鐘！ – hudsonian

I made one simple change to your code here. 我希望這是你在問什麼。「你好」的原因是以藍色而不是頁面爲中心，那個跨度是在藍色div內。我只是移動了div的範圍。

<div class="topic"></div> 
<span class="title-box">hello!</span>

來源

2015-05-15 17:50:02

CSS定心通過內部元件的左上角

回答

相關問題