QRCode.js生成的二维码水平居中的解决方案

在使用qrcode.js库生成二维码，并希望生成的二维码能够在其容器中居中。

以下是一个简单的例子，它展示了如何使用qrcode.js生成二维码，并通过CSS将其居中：

HTML代码

<div id="qrcode-container">
  <div id="qrcode"></div>
</div>

JavaScrip代码（使用qrcode.js）：

const qrcode = new QRCode(document.getElementById("qrcode"), {
  text: "https://www.example.com",
  width: 128,
  height: 128,
  colorDark : "#000000",
  colorLight : "#ffffff",
  correctLevel : QRCode.CorrectLevel.H
});

CSS代码

#qrcode-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px; /* 可以调整为你需要的高度 */
}

在这个例子中，我们使用了flexbox布局来使canvas在其容器中居中。justify-content: center;和align-items: center;分别实现了水平和垂直居中。同时，我们给容器设置了一个固定的高度，你可以根据需要调整这个值。

---

@漏刻有时