如何弥补左，顶，底，右在CSS

Question

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

有时候，当我把某些东西放在左边50％时，div看起来好像比它略微多一些（相对于浏览器）。所以他们有负利润率，我只是想知道你怎么知道为了集中这些元素需要投入什么样的价值，以及我需要放置什么样的位置属性？我只是不明白为什么位置：相对和左：50％不会让我的div进入页面的中心。

Answer 1

当你应用左：50％其实是你的元素的左边缘是居中。不是你的元素的中间。 应用margin：auto;以您的元素为中心。

Answer 2

有时候，当我把东西放在左边50％时，div看起来好像比它略微多一些（相对于浏览器）。

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

所以后来他们有负利润，我只是想知道你怎么知道什么值整理到中心的元素

半任何的width是

我需要放置什么样的财产？

这种技术通常假定absolute定位

---

我只是不明白，为什么位置：相对的，左起：50％不会让我的div转到页的中心。

相对定位将元素从其静态位置偏移。一般来说，任何时候你想尝试用相对定位来居中放置东西，你最好将左右边距设置为auto（并且定位为static）。

Answer 3

当使用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; 
} 

演示​​。

Answer 4

这是因为它将左上角定位在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% 
}