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

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

谢谢！

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. 我希望这就是你所要求的。 “你好”的原因是蓝色而不是页面的中心是那个跨度在蓝色div内。我只是将跨度移到了div之外。

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

CSS Centering位于内部元素的左上角

2 个答案: