diff --git a/packages/block-library/src/button/edit.js b/packages/block-library/src/button/edit.js
index e70cc00b278540..b258486b989203 100644
--- a/packages/block-library/src/button/edit.js
+++ b/packages/block-library/src/button/edit.js
@@ -33,10 +33,6 @@ import {
 const { getComputedStyle } = window;
 
 const applyFallbackStyles = withFallbackStyles( ( node, ownProps ) => {
-	if ( node ) {
-		node.classList.add( 'wp-block-button-wrapper' );
-	}
-
 	const { textColor, backgroundColor } = ownProps;
 	const backgroundColorValue = backgroundColor && backgroundColor.color;
 	const textColorValue = textColor && textColor.color;
diff --git a/packages/block-library/src/button/editor.scss b/packages/block-library/src/button/editor.scss
index 3250c9d7dcfe00..5ccd04dd5b6254 100644
--- a/packages/block-library/src/button/editor.scss
+++ b/packages/block-library/src/button/editor.scss
@@ -1,6 +1,10 @@
 .block-editor-block-list__block[data-type="core/button"] {
 	&[data-align="center"] {
 		text-align: center;
+		div[data-block] {
+			margin-left: auto;
+			margin-right: auto;
+		}
 	}
 
 	&[data-align="right"] {
@@ -76,6 +80,7 @@
 	}
 }
 
-.wp-block-button-wrapper {
+// Display "table" is used because the button container should only wrap the content and not takes the full width.
+div[data-type="core/button"] div[data-block] {
 	display: table;
 }