Как установить только текст в центре 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 и установите его относительно элемента grand-parent, а не родительского элемента:

//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>