Question

我试图理解为什么在这个codepen中这两个盒子没有完全对齐。

HTML

<div class="div_one">pixel</div>
<div class="div_two">percent</div>

CSS

.div_one {
  border: solid red;
  transform: translate(70px, 20%) ;
  width: 140px;
  height: 60px;
}

.div_two {
  border: solid blue;
  transform: translate(50%, 30%) ;
  width: 140px;
  height: 60px;
}

我认为我理解当使用％而不是像素或其他值时，％值是基于元素本身的高度而不是父级的％（在这种情况下是视口）。）

但是，要实现我认为的对齐，我需要将translate(48%, 30%)设置为值。为什么是这样？不是140的50％，或者是否比我理解的更多。

作为后续行动，任何人都可以解释为什么这是以数学方式垂直居中对象的首选方式吗？

Answer 1

div {
  box-sizing : border-box
}

默认情况下，在CSS框模型中，分配给元素的宽度和高度仅应用于元素的内容框。如果元素具有任何边框或填充，则会将其添加到宽度和高度，以达到在屏幕上呈现的框的大小。这意味着当您设置宽度和高度时，您必须调整您给出的值以允许可能添加的任何边框或填充。

阅读更多here

Answer 2

.div_one {
  border: solid red;
   width: 140px;
  height: 60px;
}

.div_two {
  border: solid blue;
  width: 140px;
  height: 60px;
}

删除CSS属性＆＃34;转换＆＃34;，两个Div将完美对齐，如果你想移动框的位置意味着使用填充或边距，如果你想修复框位置，那么使用位置属性< / p>

CSS3翻译：使用百分比值

2 个答案: