Html 用于将div标记居中的css

我想在屏幕中央显示我的div标签。我将屏幕绘制为黑色，div标签的当前显示位置为红色，这是我意想不到的，而div标签的首选位置为绿色

.欢迎{ 剩余利润：20% 字体大小：10px； 边框：1px实心6AA121； 宽度：60%； 高度：100px； 背景色：C3FDB8； 位置：绝对位置； }

---

您需要指定宽度，然后将边距设置为“自动”。例如：

.welcome {width:60%; margin: 0 auto;}

如上所述，将左边距和右边距都设置为自动将使div居中。如果不设置宽度，则div仍将居中，但将填充屏幕或上一个div，至少您无法分辨

---

在这里使用position:absolute不是一个好主意，除非你需要它来做一些在问题中不明显的事情。

你需要指定一个宽度，然后将边距设置为自动。例如：

.welcome {width:60%; margin: 0 auto;}

如上所述，将左边距和右边距都设置为自动将使div居中。如果不设置宽度，则div仍将居中，但将填充屏幕或上一个div，至少您无法分辨

在这里使用position:absolute不是一个好主意，除非你需要它来做一些在问题中不明显的事情

注意 在再次检查代码之后，很明显您缺少了；在您的边距离开后，浏览器会忽略它，因此您的代码无法工作。但是，您可能会发现使用left、right、top和bottom属性是更好的选择：

我的方法 由于您使用的是position:absolute；，您将div的宽度设置为60%，您可以使用：

left:20%;

因为你的宽度是60%；保留40%的屏幕可用

40/2 (left and right gap) = 20% either side

离开：

.欢迎{ 字体大小：10px； 边框：1px实心6AA121； 宽度：60%； 高度：100px； 背景色：C3FDB8； 位置：绝对位置； 左：20%； } 注意 在再次检查代码之后，很明显您缺少了；在您的边距离开后，浏览器会忽略它，因此您的代码无法工作。但是，您可能会发现使用left、right、top和bottom属性是更好的选择：

我的方法 由于您使用的是position:absolute；，您将div的宽度设置为60%，您可以使用：

left:20%;

因为你的宽度是60%；保留40%的屏幕可用

40/2 (left and right gap) = 20% either side

离开：

.欢迎{ 字体大小：10px； 边框：1px实心6AA121； 宽度：60%； 高度：100px； 背景色：C3FDB8； 位置：绝对位置； 左：20%； } 左边距不能正确使用位置：绝对，至少不能以您使用它的方式使用

你应该写的是：

width: 60%;
left: 20%; // notice how this isn't margin-left
position: absolute;

这将使分区居中

如果您的div具有固定宽度，例如500px，请尝试以下操作：

width: 500px;
left: 50%;
margin-left: -250px;
position: absolute;

这是使用position:absolute时左边距的正确方法。

左边距不能正确使用position:absolute，至少不能以您使用它的方式

你应该写的是：

width: 60%;
left: 20%; // notice how this isn't margin-left
position: absolute;

这将使分区居中

如果您的div具有固定宽度，例如500px，请尝试以下操作：

width: 500px;
left: 50%;
margin-left: -250px;
position: absolute;

这很有效，并且是使用带位置：绝对的左边距的正确方法。

使用transform:translateX 使用绝对定位时，最灵活的方法是使用变换特性translateX将div的右边缘偏移父宽度的50%，然后偏移其自身宽度的50%

优点是您不需要依赖于在中指定绝对宽度/偏移值，例如px，因此如果div的尺寸发生变化，它将保持居中

另外-用于定位；在可能的情况下，应该使用上/右/下/左来代替任何边距或填充值，这种方法也遵循这一点

.欢迎{ 字体大小：10px； 边框：1px实心6AA121； 宽度：60%； 高度：100px； 背景色：C3FDB8； 位置：绝对位置； 左：50%；/*使用transform:translateX 使用绝对定位时，最灵活的方法是使用变换特性translateX将div的右边缘偏移父宽度的50%，然后偏移其自身宽度的50%

优点是您不需要依赖于在中指定绝对宽度/偏移值，例如px，因此如果div的尺寸发生变化，它将保持居中

此外，对于定位，应尽可能使用上/右/下/左来代替任何边距或填充值，这种方法也遵循这一点

.欢迎{ 字体大小：10px； 边框：1px实心6AA121； 宽度：60%； 高度：100px； 背景色：C3FDB8； 位置：绝对位置； 左：50%；/* .欢迎{ 剩余利润：20% 字体大小：10px； 边框：1px实心6AA121； 宽度：60%； 高度：100px； 背景色：C3FDB8； 位置：相对；/*将绝对更改为相对*/ 边距：自动；/*&将边距设置为自动*/ } .欢迎{ 玛格 左：20% 字体大小：10px； 边框：1px实心6AA121； 宽度：60%； 高度：100px； 背景色：C3FDB8； 位置：相对；/*将绝对更改为相对*/ 保证金：自动；/*&将边距设置为自动*/ } 试着这样做：

如果不需要绝对位置，则如下所示： CSS:

如果您需要Position:absolute，请如下使用：

试着这样做：

如果不需要绝对位置，则如下所示： CSS:

如果您需要Position:absolute，请如下使用：

---

我想你可以试一种更简单的方法。尝试删除绝对定位，并在自动上设置左边距和右边距。就像下面的例子

.welcome {
  margin-left: auto;
  margin-right: auto;
  font-size: 10px;
  border:1px solid #6AA121;
  width :60%;
  height:100px;
  background-color:#C3FDB8;
 }

---

我想你可以试一种更简单的方法。尝试删除绝对定位，并在自动上设置左边距和右边距。就像下面的例子

.welcome {
  margin-left: auto;
  margin-right: auto;
  font-size: 10px;
  border:1px solid #6AA121;
  width :60%;
  height:100px;
  background-color:#C3FDB8;
 }

---

这将不起作用，因为位置被设置为绝对，这是可以使用的BTW刚刚发现-建议他们不使用绝对，除非它在其他地方是必要的；我怀疑这只是一个将div居中的早期尝试。如果OP只使用我的代码，而不包括绝对值，那么它将起作用。但好的地方。这不会起作用，因为位置被设置为绝对，使用BTW很好。刚刚发现-建议他们不要使用绝对，除非其他地方需要；我怀疑这只是一个将div居中的早期尝试。如果OP只使用我的代码，而不包括绝对值，那么它将起作用。但这是个好地方。删除位置：绝对，添加边距：0auto@HamedAliKhan这删除了position:absolute的大部分实用程序-您不应该这样做。删除position:absolute并添加边距：0auto@HamedAliKhan这就消除了position:absolute的许多实用性——你不应该这样做。我确实相信marginleft可以很好地使用absolute定位div。@jbutler483不，它可以正常工作，但边距实际上并没有推动元素，它只是添加了空格。我相信边距左可以正常工作，绝对定位div。@jbutler483不，它可以正常工作，但是边距实际上并没有推动元素，它只是添加了空格，对我来说，这是最好的答案。@SW4：您可能希望在翻译中包含前缀；优雅，对我来说，这是最好的答案。@SW4：您可能希望在翻译中包含前缀；