为啥我的复选框在它的父级中没有垂直对齐？ [复制]

Posted 2023-03-05

【中文标题】为啥我的复选框在它的父级中没有垂直对齐？ [复制]

【英文标题】：Why is my checkbox not vertically aligned in it's parent? [duplicate]为什么我的复选框在它的父级中没有垂直对齐？ [复制]

【发布时间】：2019-06-02 04:29:14

【问题描述】：

我有一个带有此 CSS 代码的复选框：

.row-checkbox 
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -12px;
  margin-top: -9px;

它的父元素是一个 position: relative; 的元素。 我在 Edge 浏览器中垂直居中复选框时遇到问题（在 chrome 中工作正常）。似乎 top:50% 在这两种浏览器中都不起作用，但 chrome 中的某些东西仍然使它居中。

我不想做出大的改变，比如改成 flex，因为我的项目中到处都是这些元素，我只想添加一个修复来支持 Edge。

我已经尝试解决它好几个小时了，很多事情都没有奏效。

【问题讨论】：

因为您需要将其上移一半高度，而 9px 可能不是那个高度，具体取决于哪个浏览器呈现复选框

【参考方案1】：

代替

margin-left: -12px;
margin-top: -9px;

只需使用转换：

transform: translate(-50%, -50%);

这（连同position: absolute; top: 50%; left: 50%; 和一个定位 父级）是一种通用方法，可以将任何元素居中，而不管其高度和宽度如何。

【讨论】：

我已经尝试过了，但它没有解决 - 父母需要这个解决方案的指定高度吗？在我的例子中，父母的身高是由孩子的身高设定的。

也可以用它的祖先来干扰这个解决方案吗？

在我的例子中，父元素的高度是由子元素的高度设置的，那么top: 50% 已经不起作用了，因为 50% 与父元素的高度相关。如果这需要从孩子的身高推导出来，我们就处于一个鸡蛋壳的场景中。

@ddy250，我同意Connexo给出的建议。但是您说您在上面发布的 CSS 代码没有使复选框居中。您可以使用此代码进行测试。 textuploader.com/1a0qo 这是 Edge 中的输出：i.postimg.cc/Dz6tSrvn/9.png 所以看起来你的 CSS 代码有一些问题需要解决。