"text-align: center" with "text-overflow: ellipsis" not working in Chrome and Firefox

ul {
  width: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
}

li {
  width: calc(100% / 2);
  display: block;
}


div {
  text-align: center;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border: 1px solid red;  
}

<ul>
  <li>
    <div>
      IIIIMMM
    </div>
  </li>
  <li>
    <div>
      MMMM
    </div>
  </li>
</ul>

div {
  text-align: center;
  width: 7em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border: 1px solid red;
}

<div>a⸻b…</div>
<div>a⸻b⸻c</div>
<p>Both <code>div</code>s should be identical.</p>