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">
<head>
    <title>Knockwave</title>
    <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>
</head>
<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>
</body>
</html>

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!
ASKER CERTIFIED SOLUTION
Avatar of Julian Hansen
Julian Hansen
Flag of South Africa image

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