title: How to position a pygal-chart? (Flask)
body: <p>Previously i asked about how to properly render a pygal in a flask app;<a href="https://stackoverflow.com/questions/65443809/how-to-embedding-a-pygal-chart-on-a-flask-app/65444201#65444201">How to embedding a pygal chart on a flask app?</a> . now i am asking how would you properly position it? this is what i mean by positioning it, i want to place the chart in the middle of my screen or any screen.</p>
  <p>My code:</p>
  <pre><code>import pygal
  from flask import Flask
  import webbrowser as web
  import socket
  
  def test(name=None):
      def top_bar():
          return('''
                 &lt;style&gt;
                  
                 .top_bar {
                   position: fixed;
                   top: 0px;
                   left: 0px;
                   right: 0px;
                   width: 100%;
                   background-color: #4CAF50;
                   color: white;
                   text-align: center;
                  }
                  
                 &lt;/style&gt;
                 
                 
                 &lt;head&gt;
                     &lt;title&gt;Tkboard&lt;/title&gt;
                 &lt;/head&gt;
               
               
                 &lt;div class=&quot;top_bar&quot;&gt;
                     &lt;h1 style=&quot;font-size:25px&quot;&gt;&lt;p style=&quot;font-family:verdana&quot;&gt;Tkboard&lt;/p&gt;&lt;/h1&gt;
                 &lt;/div&gt;
               
               ''')        
                 
      
      app = Flask(__name__)
      
      def __info__():
          hostname = socket.gethostname()
          ip = socket.gethostbyname(hostname)
          port = int(5969)
          all_val = [str(ip),port]
          return all_val
  
      all_val = __info__()
      
      
      
      @app.route('/')
      def __main__():
          line_chart = pygal.Line(width=550, height=350,explicit_size=True)
          line_chart.add('Firefox', [None, None,    0, 16.6,   25,   31, 36.4, 45.5, 46.3, 42.8, 37.1])
          line_chart.add('Chrome',  [None, None, None, None, None, None,    0,  3.9, 10.8, 23.8, 35.3])
          line_chart.add('IE',      [85.8, 84.6, 84.7, 74.5,   66, 58.6, 54.7, 44.8, 36.2, 26.6, 20.1])
          line_chart.add('Others',  [14.2, 15.4, 15.3,  8.9,    9, 10.4,  8.9,  5.8,  6.7,  6.8,  7.5])
          #line_chart.render()
          # Mixed
          output = f'''{top_bar()}
                 &lt;img src=&quot;{line_chart.render_data_uri()}&quot; /&gt;
                 
                 
                 '''
                 
          return output
                 
      __main__()
      url=(f'http://{all_val[0]}:{all_val[1]}')
      web.open(url)
      app.run(all_val[0],all_val[1])
          
  test()
  </code></pre>