Link to home
Start Free TrialLog in
Avatar of huangs3
huangs3Flag for Canada

asked on

HTML 5: How to keep a canvas at the center of the browser?

Hi Experts,

I am working on a HTML web page and want to keep a canvas element at the center of the browser.  Below is the code I tried
<!DOCTYPE html>
<html style="height: 99%; width: 99%; padding: 0; margin:0">
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script type="text/javascript" src="js/jquery-1.11.3.js"></script>
    <script type="text/javascript" src="js/phaser.js"></script>
<body style="width: 100%; height: 100%; margin: 0; padding: 0; border: 5px blue solid; text-align: center; vertical-align: central; vert-align: middle; mso-vertical-page-align:center">
<canvas style="background-color: red; width: 50%; height: 50%; position: relative; vert-align: middle; -webkit-align-self:center"></canvas>

Open in new window

However, it doesn't work. The horizontal alignment is ok, but not vertical.
Can you help me to find a way to do that?
Thank you!
Avatar of Julian Hansen
Julian Hansen
Flag of South Africa image

Link to home
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial