title: Aligning a JS object to the middle of a div
body: <p>I recently started playing around with js, and specifically - with <a href="https://g6.antv.vision/en" rel="nofollow noreferrer">this</a> graphing library.</p>
  <p>I ran some of their example code, and I got somewhat of a noob HTML / js question.</p>
  <p>this is their example code:</p>
  <p>When I run this code, the graph appears on the left of the div.</p>
  <p>I wanted to know how I can align this object to the mid of the div.</p>
  <p>I don't really know if this is a &quot;HTML / CSS&quot; task - or rather a &quot;js task&quot; which means I should obtain this behaviour via the object API (tbh, I tried looking into the API and I saw no alignment options).</p>
  <p>Sorry if this is a really noobie question, I tried solving it, but I had no success.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code> &lt;!DOCTYPE html&gt;
      &lt;html lang="en"&gt;
        &lt;head&gt;
          &lt;meta charset="UTF-8" /&gt;
          &lt;title&gt;Tutorial Demo&lt;/title&gt;
        &lt;/head&gt;
        &lt;body&gt;
          &lt;div id="mountNode"&gt;&lt;/div&gt;
          &lt;script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.g6-3.7.1/dist/g6.min.js"&gt;&lt;/script&gt;
          &lt;script&gt;
            const graph = new G6.Graph({
              container: 'mountNode',
              width: 800,
              height: 600,
              // Default properties for all the nodes
              defaultNode: {
                labelCfg: {
                  style: {
                    fill: '#fff',
                  },
                },
              },
              // Default properties for all the edges
              defaultEdge: {
                labelCfg: {
                  autoRotate: true,
                },
              },
              // The node styles in different states
              nodeStateStyles: {
                // The node style when the state 'hover' is true
                hover: {
                  fill: 'lightsteelblue',
                },
                // The node style when the state 'click' is true
                click: {
                  stroke: '#000',
                  lineWidth: 3,
                },
              },
              // The edge styles in different states
              edgeStateStyles: {
                // The edge style when the state 'click' is true
                click: {
                  stroke: 'steelblue',
                },
              },
              // Layout
              layout: {
                type: 'force',
                linkDistance: 100,
                preventOverlap: true,
                nodeStrength: -30,
                edgeStrength: 0.1,
              },
              // Built-in Behaviors
              modes: {
                default: ['drag-canvas', 'zoom-canvas', 'drag-node'],
              },
            });
      
            const main = async () =&gt; {
              const response = await fetch(
                'https://gw.alipayobjects.com/os/basement_prod/6cae02ab-4c29-44b2-b1fd-4005688febcb.json',
              );
              const remoteData = await response.json();
      
              const nodes = remoteData.nodes;
              const edges = remoteData.edges;
              nodes.forEach((node) =&gt; {
                if (!node.style) {
                  node.style = {};
                }
                node.style.lineWidth = 1;
                node.style.stroke = '#666';
                node.style.fill = 'steelblue';
                switch (node.class) {
                  case 'c0': {
                    node.type = 'circle';
                    node.size = 30;
                    break;
                  }
                  case 'c1': {
                    node.type = 'rect';
                    node.size = [35, 20];
                    break;
                  }
                  case 'c2': {
                    node.type = 'ellipse';
                    node.size = [35, 20];
                    break;
                  }
                }
              });
              edges.forEach((edge) =&gt; {
                if (!edge.style) {
                  edge.style = {};
                }
                edge.style.lineWidth = edge.weight;
                edge.style.opacity = 0.6;
                edge.style.stroke = 'grey';
              });
      
              graph.data(remoteData);
              graph.render();
      
              // Mouse enter a node
              graph.on('node:mouseenter', (e) =&gt; {
                const nodeItem = e.item; // Get the target item
                graph.setItemState(nodeItem, 'hover', true); // Set the state 'hover' of the item to be true
              });
      
              // Mouse leave a node
              graph.on('node:mouseleave', (e) =&gt; {
                const nodeItem = e.item; // Get the target item
                graph.setItemState(nodeItem, 'hover', false); // Set the state 'hover' of the item to be false
              });
      
              // Click a node
              graph.on('node:click', (e) =&gt; {
                // Swich the 'click' state of the node to be false
                const clickNodes = graph.findAllByState('node', 'click');
                clickNodes.forEach((cn) =&gt; {
                  graph.setItemState(cn, 'click', false);
                });
                const nodeItem = e.item; // et the clicked item
                graph.setItemState(nodeItem, 'click', true); // Set the state 'click' of the item to be true
              });
      
              // Click an edge
              graph.on('edge:click', (e) =&gt; {
                // Swich the 'click' state of the edge to be false
                const clickEdges = graph.findAllByState('edge', 'click');
                clickEdges.forEach((ce) =&gt; {
                  graph.setItemState(ce, 'click', false);
                });
                const edgeItem = e.item; // Get the clicked item
                graph.setItemState(edgeItem, 'click', true); // Set the state 'click' of the item to be true
              });
            };
            main();
          &lt;/script&gt;
        &lt;/body&gt;
      &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>