如果内部还有另一个div，如何仅将文本设置在div的中心？

Question

你好，我有两个div #box-first和两个孩子#first 我想在中间的#box-first内（中间）放置文本，但是不想看到空格或空白导致文本。

在此示例中，我将文本放在其他div内。...但是如果此div（#n1）的width很小，则该文本将不完全可见。

 <div id="page">
  <div id="box-first">
    <div id="first">
      <div id="n1">
        1500 text
      </div>
    </div>
  </div>

那么我该如何解决呢？ 我尝试使用position: relative，但无法将文字放在中间。

我创建了jsfiddle：https://jsfiddle.net/rdxnvjpw/28/

问题出在第二个“栏”

非常感谢，我的英语很抱歉。

Answer 1

使用position:absolute并使其相对于祖父母元素而不是父元素：

//FIRST BAR
$('#first').addClass('first-start');

setTimeout(function() {
  $('#first').addClass('first-pause');
}, 1500);

//SECOND BAR
$('#second').addClass('second-start');

setTimeout(function() {
  $('#second').addClass('second-pause');
}, 200);

#page {
  margin-top: 50px;
  width: 300px;
  height: 200px;
  background-color: #000;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

#box-first,
#box-second {
  width: 200px;
  height: 50px;
  background-color: #fff;
  border-radius: 8px;
  margin-top: 10px;
  margin-bottom: 10px;
  position:relative;
}

@keyframes first {
  0% {
    background-color: green;
    width: 0%
  }
  33% {
    background-color: yellow;
    width: 33%
  }
  66% {
    background-color: orange;
    width: 66%
  }
  100% {
    background-color: red;
    width: 100%
  }
}

@keyframes second {
  0% {
    background-color: green;
    width: 0%
  }
  33% {
    background-color: yellow;
    width: 33%
  }
  66% {
    background-color: orange;
    width: 66%
  }
  100% {
    background-color: red;
    width: 100%
  }
}

#first, #second {
  width: 100%;
  height: 100%;
  border-radius: 8px;
  background-color: #fff;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.first-start, .second-start  {
  animation: first 2s linear;
}

.first-pause, .second-pause {
  animation-play-state: paused;
}



#n1, #n2 {
  font-size: 19px;
  line-height:50px;
  color: #000;
  font-weight: bold;
  position:absolute;
  left:0;
  right:0;
  text-align:center;
  top:0;
  bottom:0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="page">
  <div id="box-first">
    <div id="first">
      <div id="n1">
        1500
      </div>
    </div>
  </div>
  <div id="box-second">
    <div id="second">
      <div id="n2">
        1500
      </div>
    </div>
  </div>
</div>