How to render QR code at center of the div in JavaScript platform

This article explains how to render a QR code at the center of a div in the JavaScript platform. In Syncfusion, the JavaScript Barcode control allows you to easily generate QR codes in your application.

To render QR code at center of the div, we need to follow the below steps.

Step 1: Create QR Code using QrCodeGenerator

You can use the Syncfusion Barcode control’s QRCodeGenerator to generate a QR code.

Step 2: Add style to div

To center the QR Code add style to the div

  <style>
  /* position barcode at center */
     #element {
       position: absolute;
       top: 50%;
       left: 50%;
       transform: translate(-50%, -50%);
     }
     .barcodeStyle {
       height: 400px;
       width: 400px;
       background-color: #acf1e9;
       position: absolute;
     }
   </style>
  
   <div id="container" class="barcodeStyle">
     <div id="element"></div>
   </div>
  

Refer to the working sample for additional details and implementation: Click here for sample