Card_mod for vertical center on page

Third party integrations
,
1

Greetings,

I’m working on implementing a view that displays QR/Barcodes based on my location per this reddit post.

I’d like the title and photo to show up centered vertically so it’s easier to scan.

I was able to get the photo to move to the center with card_mod, however it’s not being cropped anymore. I’m thinking my use of position moved it out of the area that was being cropped by the native CSS.

Also, I wasn’t able to get the header to move with it (I understand card_mod doesn’t modify the grid card). When I used the same CSS (except top: 40%) on the heading card I couldn’t find the header and gave up. The header being up top isn’t a big deal.

image
image1251×1251 38.6 KB

Any suggestions on another approach to get this to work?

square: false
type: grid
cards:
  - type: heading
    heading: Costco Membership
    heading_style: title
  - type: picture
    image: /api/image/serve/xxx/512x512
    alt_text: cake's Costco Membership
    card_mod:
      style: |
        ha-card {
          position: fixed;
          top: 50%;
        }
visibility:
  - condition: state
    entity: person.cake
    state: home
columns: 1

Thanks!