如何居中通过document.documentElement.innerHTML生成的文本？

嘿，我来帮你搞定这个文本居中的问题！其实用CSS来实现是最优解——HTML里的<center>标签早就被废弃了，属于过时的表现型标签，不符合现在结构与表现分离的前端规范，所以咱们果断用CSS就好。

接下来给你两种简单靠谱的实现方式，你可以根据需求选：

方法1：用Flex布局快速实现全屏居中 #

Flex是现在最常用的居中方案，代码简洁还能适配各种场景。你可以在脚本里同时添加文本和样式：

// 设置页面文本
document.documentElement.innerHTML = '<div class="centered-content">TEXT</div>';

// 创建并插入样式
const styleSheet = document.createElement('style');
styleSheet.textContent = `
  /* 让html和body占满整个视口 */
  html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    /* 开启flex布局，实现水平+垂直居中 */
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .centered-content {
    /* 这里可以加你想要的文本样式，比如字体大小、颜色 */
    font-size: 28px;
    color: #333;
  }
`;
document.head.appendChild(styleSheet);

原理很简单：justify-content: center负责水平居中，align-items: center负责垂直居中，给html和body设置height:100%是为了让它们铺满整个浏览器窗口，这样文本就能精准定位在页面正中央。

方法2：结合你现有的.script-class样式 #

如果你想复用你已经写好的.script-class，可以调整这个类的样式，同时让容器本身也居中：

document.documentElement.innerHTML = '<div class="script-class">TEXT</div>';

const styleSheet = document.createElement('style');
styleSheet.textContent = `
  @CHARSET "UTF-8";
  html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .script-class {
    width: 70px;
    height: 300px;
    border: 1px solid #c3c3c3;
    /* 让容器内部的文本也居中 */
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center; /* 处理文本换行后的对齐问题 */
  }
`;
document.head.appendChild(styleSheet);

这样一来，你的带边框的容器会先在页面中央，容器里的文本也会居中显示。

为什么不推荐HTML方法？ #

之前的<center>标签现在已经被W3C标记为过时（obsolete）了，虽然有些浏览器还能兼容，但它把结构和表现混在一起，不利于代码维护和后续扩展，所以绝对不建议使用。

总之，用CSS的Flex布局是最现代、最可靠的方案，代码量少还不容易出问题，试试上面的方法应该就能解决你的问题啦！

内容的提问来源于stack exchange，提问作者Adam Huml