html - 如何在 CSS 中补偿左、上、下、右

Question

我一直在努力寻找，我看到很多例子，人们会在 50% 时离开或顶部或类似的东西，我希望这足以让任何东西居中，但事实并非如此。

有时，当我为某些东西留出 50% 时，div 看起来好像略多于此(相对于浏览器而言)。那么他们有负边距，我只是想知道你如何知道为了使元素居中而放置什么值，以及我需要放置什么位置属性？我只是不明白为什么 position:relative 和 left:50% 不会让我的 div 转到页面的中心。

Answer 1

当使用 top 对元素进行绝对定位时, right , bottom和 left您正在将它移动到距元素边缘一定距离。它将相对于最后定位的元素移动它。最后一个位置元素是下一个通过 CSS 应用了任何类型定位的祖先元素。如果没有祖先元素作为定位集，则视口(viewport)窗口将用作引用。

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

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 .