如何基于父元素尺寸实现元素的相对定位？

给你几个不用手动调整固定像素、基于相对单位的纯CSS方案，完美适配你的家庭仪表盘需求：

方法1：绝对定位 + Transform 居中（最常用的灵活方案） #

利用绝对定位的百分比属性，配合transform偏移自身尺寸的一半，实现完全基于父元素尺寸的居中，不管父元素字号怎么变，数字都会自动居中：

.house {
  font-size: 500%; /* 父元素字号可随意调整 */
  position: relative;
}

.temp {
  font-size: 0.3em; /* 用em关联父元素字号，自动缩放 */
  position: absolute;
  top: 50%;
  left: 50%;
  /* 偏移自身的50%，实现真正居中 */
  transform: translate(-50%, -50%);
}

<div class="house">
  ⌂
  <div class="temp">13</div>
</div>

方法2：Flex布局（更直观的居中方式） #

直接把父元素设为Flex容器，让内部元素自动居中，不用绝对定位也能实现效果：

.house {
  font-size: 500%;
  display: flex;
  justify-content: center;
  align-items: center;
  /* 防止数字超出符号范围，可设置父元素尺寸 */
  width: 1.2em;
  height: 1.2em;
}

.temp {
  font-size: 0.3em;
  position: absolute; /* 让数字悬浮在符号上方 */
}

方法3：Grid布局（最简洁的写法） #

Grid布局的place-items属性可以一键实现居中，代码更短：

.house {
  font-size: 500%;
  display: grid;
  place-items: center;
  width: 1.2em;
  height: 1.2em;
  position: relative;
}

.temp {
  font-size: 0.3em;
  position: absolute;
}

补充说明 #

绝对定位其实完全支持百分比单位，只是直接设置top:50%; left:50%是让数字的左上角对齐父元素的中心，所以需要transform: translate(-50%, -50%)把数字自身往左上偏移一半尺寸，这样就能让数字的中心和父元素中心重合，完全不用手动调像素，而且父元素尺寸变化时会自动适配。

内容的提问来源于stack exchange，提问作者WoJ