Html 负边距是如何将元素设置在页面中心的？_Html_Css

Html 负边距是如何将元素设置在页面中心的？

html css

Html 负边距是如何将元素设置在页面中心的？,html,css,Html,Css,我遇到了以下css片段。它将id搜索栏设置为元素的绝对位置，宽度为300px，高度为27px，并将搜索栏设置为距其正常位置50% #search_bar { position:relative; width: 300px; left:50%; height:27px; } 但是我没有看到搜索栏在中间对齐。为什么呢？但如果我将代码段更改为： #search_bar { position:relative; width: 300px; margin-left:-150p

我遇到了以下css片段。它将id搜索栏设置为元素的绝对位置，宽度为

300px

，高度为27px，并将搜索栏设置为距其正常位置

50%

#search_bar {
  position:relative;
  width: 300px;
  left:50%;
  height:27px;
}

但是我没有看到搜索栏在中间对齐。为什么呢？但如果我将代码段更改为：

#search_bar {
  position:relative;
  width: 300px;
  margin-left:-150px;
  left:50%;
  height:27px;
}

它与页面中心对齐。怎么样？属性

margin left:-150px

如何将其设置为中心？

left:50%将条形图的开头放在屏幕的中间，而不是居中。但是，如果你知道条的宽度（300 px），然后移动它的左边一半，那么中间的条将在屏幕的中间。这有意义吗？150是300宽度的一半。如果条形图的宽度为400，则需要使用-200。

左：50%将条形图的开头放在屏幕的中间，而不是居中。但是，如果你知道条的宽度（300 px），然后移动它的左边一半，那么中间的条将在屏幕的中间。这有意义吗？150是300宽度的一半。如果条宽为400，则需要使用-200。

通过使用相对定位，允许块相对于静止时的位置移动<代码>左：50%将边距的左侧放置在包含定位块的中间位置，对于您来说，该块可能是视口（也称为浏览器窗口）<代码>左边距：-150px然后将边距框的左侧从当前位置边距框向左移动150px。由于总宽度为300px，因此边框/内容框相对于包含的定位块居中。

通过使用相对定位，您允许块相对于静止时的位置移动<代码>左：50%将边距的左侧放置在包含定位块的中间位置，对于您来说，该块可能是视口（也称为浏览器窗口）<代码>左边距：-150px然后将边距框的左侧从当前位置边距框向左移动150px。由于您的总宽度为300px，因此边框/内容框相对于包含定位块居中。

这是因为您使用的是绝对位置，因此负边距为元素宽度的一半，以便将元素向后移动其总宽度的1/2

position: absolute;
left: 50%; /* This shifts the element 50% from left, if you 
             don't want to use negative margins you can use 45%, 40% but you need 
             to fiddle with the measurements first */

所以计算是这样的

集装箱总宽度

1000px

元件宽度

300px

左：

50%

表示它将从左

500px

到

800px

所以这不是中心对吗

所以

-150px

从

500px

/*500这里剩下50%*/

您可以从

350px

到

650px

获取元素，这是因为您使用的是绝对位置，所以负边距是元素宽度的一半，因此它将元素向后移动其总宽度的1/2

position: absolute;
left: 50%; /* This shifts the element 50% from left, if you 
             don't want to use negative margins you can use 45%, 40% but you need 
             to fiddle with the measurements first */