js中怎么设置文字居中显示

<div id="centeredText" style="text-align: center;">这是居中的文字</div>

.center-text {
  text-align: center;
}

<div id="centeredText">这是居中的文字</div>
<script>
  document.getElementById('centeredText').classList.add('center-text');
</script>

<div id="centeredText">这是居中的文字</div>
<script>
  var element = document.getElementById('centeredText');
  element.style.textAlign = 'center';
</script>

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh; /* 设置容器高度为视口高度 */
}

<div class="container">
  <div>这是居中的文字</div>
</div>

.container {
  display: grid;
  place-items: center;
  height: 100vh; /* 设置容器高度为视口高度 */
}

<div class="container">
  <div>这是居中的文字</div>
</div>