CSS 居中位于内部元素的左上角

Question

我正在尝试使用 CSS 使内部元素居中，但出于某种原因，内部元素基于左上角而不是其中心居中：http://codepen.io/anon/pen/WvxeEo

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%);"
}

有没有办法设置它使其正确居中？内部元素将是未知的 width/height，因为它是动态文本。

谢谢！

Answer 1

试试这个 — 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%);
}

Answer 2

I made one simple change to your code here. 我希望这就是你要问的。 "hello" 以蓝色而不是页面为中心的原因是该跨度位于蓝色 div 内。我只是将跨度移到了 div.

之外

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

CSS 居中位于内部元素的左上角

CSS Centering is by top left of inner element

html

css

css-transforms