title: Center Popover in Viewport
body: <p>How should I center a React Material-UI Popover in the viewport?</p>
  
  <p>My app is built on the Next.js framework, which is built on React.  (I have included the full dependencies from my package.json below.)</p>
  
  <p>I have an element that opens a Popover when it is clicked:</p>
  
  <pre><code>        &lt;Popover
              id="video-popover"
              open={Boolean(video)}
              onClose={this.handleClose}
              anchorOrigin={{
                  vertical: 'center',
                  horizontal: 'center'
              }}
              transformOrigin={{
                  vertical: 'center',
                  horizontal: 'center'
              }}
          &gt;
              &lt;video controls autoPlay src={`/static/${video}`}&gt;
                  Your browser does not support the
                      &lt;code&gt;video&lt;/code&gt; element.
                  &lt;/video&gt;
          &lt;/Popover&gt;
  </code></pre>
  
  <p>I would like to get the video to be centered in the view.</p>
  
  <p>Normally I would set the anchorEl property of the Popover element and the Popover would be centered over that anchor element.  But, what element should I use to center in the viewport?</p>
  
  <hr>
  
  <p>In case it's not obvious, the onClick handler just sets state.video to the filename of the video to be played.  The onClose handler sets state.video to null.  If you need me to upload more of the JSX code, let me know, but I'm pretty sure it's not relevant to the centering of the Popover on the viewport.</p>
  
  <p>Here are my dependencies:</p>
  
  <pre><code>  "dependencies": {
      "@material-ui/core": "^3.6.2",
      "next": "^7.0.2",
      "react": "^16.6.3",
      "react-dom": "^16.6.3",
      "react-icons": "^3.2.2"
    },
  </code></pre>