Position du texte étrange dans mon code simple

Code problématique ici:

#container {  /*CSS part*/
  width: 606px;
  height: 400px;
  border: 1px #434343 solid;
  border-radius: 7px;
  border-top: none;
}

#tabs {
  width: 100%;
  height: 100px;
  margin: 0;
  padding: 0;
  list-style: none;
}

#tabs li {
  float: left;
  width: 200px;
  height: 100px;
  line-height: 100px;
  text-align: center;
  border: 1px solid;
  cursor: pointer;
  border-radius: 7px 7px 0 0;
}

#content {
  height: 300px;
  text-align: center;
}

.subtab {
  display: none;
  text-align: center;
  height: 100%;
}

#tab1 {
  background-color: blue;
}

#tab2 {
  background-color: red;
}

#tab3 {
  background-color: green;
}

#blue {
  background-color: blue;
}

#red {
  background-color: red;
}

#green {
  background-color: green;
}

<div id="container"> <!-- html part -->
<ul id="tabs">
  <li id="blue">blue</li>
  <li id="red">red</li>
  <li id="green">green</li>
</ul>
<div id="content">
  <div id="tab1" class="subtab">This is tab1!</div>
  <div id="tab2" class="subtab">This is tab2!</div>
  <div id="tab3" class="subtab">This is tab3!</div>
</div>

var tablist = document.getElementById('tabs').children; //js part
var sublist = document.getElementsByClassName('subtab');

for (var i = 0; i < tablist.length; i++) {
  tablist[i].index = i; //保存每次迭代的i值

  tablist[i].addEventListener('click', function () {
    for (var x = 0; x < sublist.length; x++) {
      sublist[x].style.display = 'none';
    }

    sublist[this.index].style.display = 'block';
    this.style.borderBottom = 'none';
  })
}

Désolé, la partie html ne semble pas correcte, le démarquage est toujours une douleur pour moi.

Code complet ici démo

La chose étrange est la position du texte du contenu de l'onglet (classe de sous-onglet), si vous cliquez dans un ordre bleu-> rouge-> vert, le texte s'affiche bien au centre, cependant, si vous cliquez d'abord sur le vert, le texte apparaîtra aligné à droite, puis vous cliquez sur bleu puis vous constaterez que la position du texte sera au bon endroit.

Il y a plusieurs situations à ce sujet, mais c'est essentiellement le problème.

Pourquoi??