Css 我怎样才能让孩子''；s到其父对象左边界和上边界的距离是否相等？

---

放大镜是一个字体很棒的图标。它的父框是列空间。我在父框上使用了justify content:center和display:flex使放大镜水平居中。但是如何使从顶部的放大距离与其从父框的左边界或右边界的距离相同。所以它看起来像是位于一个看不见的正方形的中心。

这里有一种使用填充的方法。div代表侧边栏，白色正方形代表图标。在这方面要注意的主要问题是：

box-sizing: border-box;
padding:calc((10% - 40px) / 2);

第一行使其变大，因此添加填充不会使对象变大。第二个like将边栏所有内部的填充设置为

（边栏宽度-图标宽度）/2

。这将使图标正确居中，并随着值因缩放或窗口大小调整而改变而进行调整

div.container{
背景颜色：浅蓝色；
高度：200px；
显示：内联块；
}
分区广场{
宽度：40px；
高度：40px；
背景色：白色；
}
第c1分部{
宽度：10%；
框大小：边框框；
填充：计算（（10%-40px）/2）；
}
第c2分部{
宽度：15%；
框大小：边框框；
填充：计算（（15%-40px）/2）；
}
第c3分部{
宽度：20%；
框大小：边框框；
填充：计算（（20%-40px）/2）；
}

你可以使用

填充

或

flex

进行填充。你可以显示一些html吗？如果你发布你拥有的代码，一个最小的工作代码片段，你就增加了获得正确答案的机会。实际上，我希望随着列的变宽，放大倍数变大。