diff --git a/src/css/layout.css b/src/css/layout.css
index 1bc189a..8c8ef2d 100644
--- a/src/css/layout.css
+++ b/src/css/layout.css
@@ -531,6 +531,9 @@ body .sp-preview{
 	-ms-grid-column: 2;
 	grid-area: main;
 	overflow: hidden;
+	display: flex;
+	justify-content: center;
+	align-items: center;
 }
 .canvas_wrapper{
 	position:relative;
diff --git a/src/js/core/base-gui.js b/src/js/core/base-gui.js
index 29b2a0f..652d7d8 100644
--- a/src/js/core/base-gui.js
+++ b/src/js/core/base-gui.js
@@ -165,10 +165,9 @@ class Base_gui_class {
 		window.addEventListener('resize', function (event) {
 			//resize
 			_this.prepare_canvas();
-			_this.check_canvas_offset();
 			config.need_render = true;
 		}, false);
-		_this.check_canvas_offset();
+		this.check_canvas_offset();
 	}
 
 	check_canvas_offset() {
@@ -206,6 +205,8 @@ class Base_gui_class {
 		//change wrapper dimensions
 		document.getElementById('canvas_wrapper').style.width = w + 'px';
 		document.getElementById('canvas_wrapper').style.height = h + 'px';
+
+		this.check_canvas_offset();
 	}
 
 	load_saved_changes() {