diff --git a/src/panels/lovelace/cards/hui-gauge-card.ts b/src/panels/lovelace/cards/hui-gauge-card.ts
index a7e9faae09..ad79b717a5 100644
--- a/src/panels/lovelace/cards/hui-gauge-card.ts
+++ b/src/panels/lovelace/cards/hui-gauge-card.ts
@@ -136,7 +136,6 @@ class HuiGaugeCard extends LitElement implements LovelaceCard {
       >
         <div class="container">
           <div class="gauge-a"></div>
-          <div class="gauge-b"></div>
           <div
             class="gauge-c"
             style=${styleMap({
@@ -144,16 +143,17 @@ class HuiGaugeCard extends LitElement implements LovelaceCard {
               "background-color": this._computeSeverity(state),
             })}
           ></div>
-          <div class="gauge-data">
-            <div id="percent">
-              ${stateObj.state}
-              ${this._config.unit ||
-                stateObj.attributes.unit_of_measurement ||
-                ""}
-            </div>
-            <div id="name">
-              ${this._config.name || computeStateName(stateObj)}
-            </div>
+          <div class="gauge-b"></div>
+        </div>
+        <div class="gauge-data">
+          <div id="percent">
+            ${stateObj.state}
+            ${this._config.unit ||
+              stateObj.attributes.unit_of_measurement ||
+              ""}
+          </div>
+          <div id="name">
+            ${this._config.name || computeStateName(stateObj)}
           </div>
         </div>
       </ha-card>
@@ -250,9 +250,8 @@ class HuiGaugeCard extends LitElement implements LovelaceCard {
   static get styles(): CSSResult {
     return css`
       ha-card {
-        height: calc(var(--base-unit) * 3);
-        position: relative;
         cursor: pointer;
+        padding: 16px 16px 0 16px;
       }
       ha-card:focus {
         outline: none;
@@ -261,15 +260,12 @@ class HuiGaugeCard extends LitElement implements LovelaceCard {
       .container {
         width: calc(var(--base-unit) * 4);
         height: calc(var(--base-unit) * 2);
-        position: absolute;
-        top: calc(var(--base-unit) * 1.5);
-        left: 50%;
         overflow: hidden;
+        position: relative;
         text-align: center;
-        transform: translate(-50%, -50%);
+        margin: auto;
       }
       .gauge-a {
-        z-index: 1;
         position: absolute;
         background-color: var(--primary-background-color);
         width: calc(var(--base-unit) * 4);
@@ -279,7 +275,6 @@ class HuiGaugeCard extends LitElement implements LovelaceCard {
           0px 0px;
       }
       .gauge-b {
-        z-index: 3;
         position: absolute;
         background-color: var(--paper-card-background-color);
         width: calc(var(--base-unit) * 2.5);
@@ -291,7 +286,6 @@ class HuiGaugeCard extends LitElement implements LovelaceCard {
           0px 0px;
       }
       .gauge-c {
-        z-index: 2;
         position: absolute;
         background-color: var(--label-badge-blue);
         width: calc(var(--base-unit) * 4);
@@ -307,15 +301,12 @@ class HuiGaugeCard extends LitElement implements LovelaceCard {
         transition: all 1.3s ease-in-out;
       }
       .gauge-data {
-        z-index: 4;
+        text-align: center;
         color: var(--primary-text-color);
         line-height: calc(var(--base-unit) * 0.3);
-        position: absolute;
-        width: calc(var(--base-unit) * 4);
-        height: var(--base-unit);
-        top: var(--base-unit);
-        margin-left: auto;
-        margin-right: auto;
+        width: 100%;
+        position: relative;
+        top: calc(var(--base-unit) * -0.5);
       }
       .init .gauge-data {
         transition: all 1s ease-out;