Html5 center gema to web page

I’m not sure is this openfl or css issue, but question is simple:
How to keep game initial dimensions (let’s say 800x600) and center it on web page?

Yes gonzos - it’s just a matter of the correct CSS.
After you’ve compiled your project, open the generated index.html file
and replace:

	<style>
		html,body { margin: 0; padding: 0; height: 100%; overflow: hidden; }
		#openfl-content { background: #000000; width: 100%; height: 100%; }
	</style>

by:

<style>
	html,
	body {
		overflow: hidden;
	}

	#openfl-content {
		background: #000000;
		width: 800px;
		height: 480px;
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		margin: auto;
	}
</style>

This could be done in a more elegant way by using a custom .html template for your project.

1 Like

Works. Thank you :slight_smile: