diff --git a/src/panels/lovelace/cards/hui-button-card.ts b/src/panels/lovelace/cards/hui-button-card.ts
index 976bb6bbe8..250a90b8ea 100644
--- a/src/panels/lovelace/cards/hui-button-card.ts
+++ b/src/panels/lovelace/cards/hui-button-card.ts
@@ -228,6 +228,9 @@ export class HuiButtonCard extends LitElement implements LovelaceCard {
         text-align: center;
         padding: 4% 0;
         font-size: 1.2rem;
+        height: 100%;
+        box-sizing: border-box;
+        justify-content: center;
       }
 
       ha-card:focus {
diff --git a/src/panels/lovelace/cards/hui-entities-card.ts b/src/panels/lovelace/cards/hui-entities-card.ts
index d738c4d2c4..954d10c00e 100644
--- a/src/panels/lovelace/cards/hui-entities-card.ts
+++ b/src/panels/lovelace/cards/hui-entities-card.ts
@@ -185,6 +185,9 @@ class HuiEntitiesCard extends LitElement implements LovelaceCard {
 
   static get styles(): CSSResult {
     return css`
+      ha-card {
+        height: 100%;
+      }
       .card-header {
         display: flex;
         justify-content: space-between;
diff --git a/src/panels/lovelace/cards/hui-gauge-card.ts b/src/panels/lovelace/cards/hui-gauge-card.ts
index df0ac3dbb0..59fb921970 100644
--- a/src/panels/lovelace/cards/hui-gauge-card.ts
+++ b/src/panels/lovelace/cards/hui-gauge-card.ts
@@ -249,6 +249,12 @@ class HuiGaugeCard extends LitElement implements LovelaceCard {
       ha-card {
         cursor: pointer;
         padding: 16px 16px 0 16px;
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+        box-sizing: border-box;
+        justify-content: center;
+        align-items: center;
       }
       ha-card:focus {
         outline: none;
@@ -259,8 +265,6 @@ class HuiGaugeCard extends LitElement implements LovelaceCard {
         height: calc(var(--base-unit) * 2);
         overflow: hidden;
         position: relative;
-        text-align: center;
-        margin: auto;
       }
       .gauge-a {
         position: absolute;
diff --git a/src/panels/lovelace/cards/hui-light-card.ts b/src/panels/lovelace/cards/hui-light-card.ts
index 7c01371fa3..133bf7245f 100644
--- a/src/panels/lovelace/cards/hui-light-card.ts
+++ b/src/panels/lovelace/cards/hui-light-card.ts
@@ -116,40 +116,45 @@ export class HuiLightCard extends LitElement implements LovelaceCard {
           tabindex="0"
         ></paper-icon-button>
 
-        <div id="controls">
-          <div id="slider">
-            <round-slider
-              min="0"
-              .value=${brightness}
-              @value-changing=${this._dragEvent}
-              @value-changed=${this._setBrightness}
-              style=${styleMap({
-                visibility: supportsFeature(stateObj, SUPPORT_BRIGHTNESS)
-                  ? "visible"
-                  : "hidden",
-              })}
-            ></round-slider>
-            <paper-icon-button
-              class="light-button ${classMap({
-                "state-on": stateObj.state === "on",
-                "state-unavailable": stateObj.state === "unavailable",
-              })}"
-              .icon=${this._config.icon || stateIcon(stateObj)}
-              style=${styleMap({
-                filter: this._computeBrightness(stateObj),
-                color: this._computeColor(stateObj),
-              })}
-              @click=${this._handleClick}
-              tabindex="0"
-            ></paper-icon-button>
+        <div class="content">
+          <div id="controls">
+            <div id="slider">
+              ${supportsFeature(stateObj, SUPPORT_BRIGHTNESS)
+                ? html`
+                    <round-slider
+                      min="0"
+                      .value=${brightness}
+                      @value-changing=${this._dragEvent}
+                      @value-changed=${this._setBrightness}
+                    ></round-slider>
+                  `
+                : ""}
+              <paper-icon-button
+                class="light-button ${classMap({
+                  "slider-center": supportsFeature(
+                    stateObj,
+                    SUPPORT_BRIGHTNESS
+                  ),
+                  "state-on": stateObj.state === "on",
+                  "state-unavailable": stateObj.state === "unavailable",
+                })}"
+                .icon=${this._config.icon || stateIcon(stateObj)}
+                style=${styleMap({
+                  filter: this._computeBrightness(stateObj),
+                  color: this._computeColor(stateObj),
+                })}
+                @click=${this._handleClick}
+                tabindex="0"
+              ></paper-icon-button>
+            </div>
           </div>
-        </div>
 
-        <div id="info">
-          <div class="brightness">
-            %
+          <div id="info">
+            <div class="brightness">
+              %
+            </div>
+            ${this._config.name || computeStateName(stateObj)}
           </div>
-          ${this._config.name || computeStateName(stateObj)}
         </div>
       </ha-card>
     `;
@@ -256,6 +261,8 @@ export class HuiLightCard extends LitElement implements LovelaceCard {
       }
 
       ha-card {
+        height: 100%;
+        box-sizing: border-box;
         position: relative;
         overflow: hidden;
         text-align: center;
@@ -273,6 +280,13 @@ export class HuiLightCard extends LitElement implements LovelaceCard {
         z-index: 25;
       }
 
+      .content {
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+      }
+
       #controls {
         display: flex;
         justify-content: center;
@@ -298,13 +312,6 @@ export class HuiLightCard extends LitElement implements LovelaceCard {
         color: var(--paper-item-icon-color, #44739e);
         width: 60%;
         height: auto;
-        position: absolute;
-        max-width: calc(100% - 40px);
-        box-sizing: border-box;
-        border-radius: 100%;
-        top: 50%;
-        left: 50%;
-        transform: translate(-50%, -50%);
       }
 
       .light-button.state-on {
@@ -315,9 +322,17 @@ export class HuiLightCard extends LitElement implements LovelaceCard {
         color: var(--state-icon-unavailable-color);
       }
 
+      .slider-center {
+        position: absolute;
+        max-width: calc(100% - 40px);
+        box-sizing: border-box;
+        border-radius: 100%;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+      }
+
       #info {
-        display: flex-vertical;
-        justify-content: center;
         text-align: center;
         margin-top: -56px;
         padding: 16px;