如何补偿CSS中的left，top，bottom，right

Question

我看起来非常努力，我看到很多例子，人们会以50％的比例离开或者顶部或类似的东西，而且我希望这足以让任何事情都集中在一起，但是＆＃ 39;事实并非如此。

有时当我把50％的东西放在某物上时，div看起来好像比它稍微多一点（相对于浏览器）。那么他们就有负利润，我只是想知道你怎么知道为了使元素居中而要放置什么值，以及我需要放置什么属性？我只是不明白为什么位置：亲戚和左：50％不会让我的div进入页面的中心。

Answer 1

使用top，right，bottom和left对元素进行绝对定位时，您将其移动距离元素边缘一定距离。它将相对于最后定位的元素移动它。最后一个position元素是下一个祖先元素，它通过CSS应用于它的任何类型的定位。如果没有祖先元素作为定位集，则视口窗口将用作参考。

我创建了一个快速图表来显示正在发生的事情。

left: 50%;将元素的左边缘移动到最后一个定位元素左边缘宽度的50％（一半）。通过在元素左边缘之间添加空格，您可以有效地将元素移动到右侧。

margin-left: <negative value>;设置为元素宽度的一半，将其拉回到左侧。这可以解决您所看到的偏心问题。

今天很多人会放弃margin-left使用负值并选择transform: translateX( -50% );。这使得它们更灵活，因为不需要知道元素宽度。

transform: translateX( -50% );的CSS可能如下所示：

div {
  position: absolute;
  left: 50%;
  border: 2px dashed red;
  width: 200px;
  height: 100px;
  transform: translateX( -50% );
}

演示JSFiddle。

如果您想简单地将某些内容水平放置并且已应用宽度（px，%等工作），则可以使用margin: 0 auto; width: <width value>;。 必须为margin: 0 auto;设置宽度才能生效！

示例：

div {
    margin: 0 auto;
    width: 25%;
    height: 100px;
    border: 2px dashed red;
}

演示JSFiddle。

Answer 2

  

有时当我把50％的东西放在某物上时，div看起来好像比它稍微多一点（相对于浏览器）。

它将左边缘定位在50％点。

  

那么他们有负利润，我只是想知道你怎么知道要把元素集中在一起的价值

width

的一半

  

我需要放置什么属性？

该技术通常假设absolute定位

  

我只是不明白为什么位置：亲戚和左：50％不会让我的div去页面的中心。

相对定位会将元素从其静态位置偏移。通常，只要您想尝试使用相对定位来居中某些东西，最好将左右边距设置为auto（并将定位保留为static）。

Answer 3

那是因为它将左上角定位在50％。 您应该使用translate：

.centered {
    position: absolute; 
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    // this moves the center of centered item to 50%
}

Answer 4

当你应用左：50％它实际上是你的元素的左边缘居中。不是元素的中间部分。 申请保证金：auto;以你的元素为中心。