How do I center text and images with Card Mod?

[Ramias]

I’ve tried a ton of variations with no luck. The screenshot is a vertical column with 5 parts – time, gap, temp, gap, weather icon. I want the temp and icon centered; ideally such that it would work on iPads and Fire Tablets with different resolutions.

Update: I have the temp and time centered correctly – template devices with markdown card made it much easier than I’d originally done. I still need an assist with properly centering the weather icon.

Code for the weather icon. My centering attempts have all been unreliable hacks and not succeeded.

type: custom:weather-card
entity: weather.my_location
number_of_forecasts: '1'
details: false
forecast: false
hourly_forecast: false
style:
  .: |
    ha-card {
      height: 300px;
      position: relative;
      background-color: black;
    }
    ha-card div.current span.temp {
      display: none
      }
    ha-card div.current span.tempc {
      display: none
      }
    ha-card div.current span.icon {
      width: 160%;
      height: 160%;
      margin: 0;
      position: absolute;
      top: 50%;
      left: -20%;
      transform: translateY(-50%);
      }

the left-20% is needed to center it on my Fire tablet. Without it, the sun icon moves too far to the right but it is centered on my pc screen (where the screenshot was taken).