用于居中div标签的css

Question

我想在屏幕中央显示我的div标签。我将我的屏幕画成黑色，div标签的当前显示位置为红色（我意外），而我喜欢的div标签位置为绿色。{ {0}}

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

 <div class="welcome">
   </div>

我想在中间显示。

Answer 1

使用transform：translateX

使用绝对定位，最灵活的方法是将div的右手边缘偏移父宽度的50％，然后使用变换属性， translateX

优点是您不需要依赖于指定绝对宽度/偏移值，例如px，因此如果div的尺寸发生变化，.welcome { font-size: 10px; border: 1px solid #6AA121; width: 60%; height: 100px; background-color: #C3FDB8; position: absolute; left: 50%; /* <--- move div right by 50% of parent width */ transform: translateX(-50%); /* <--- move div left by 50% of its own width */ }将保持居中。

另外 - 用于定位;应尽可能使用顶部/右侧/底部/左侧代替任何边距或填充值，此方法也遵循此。

<div class="welcome">
</div>

translateX

-ms- 受到良好支持，请参阅here for a full rundown，需要注意的要点是变换需要IE9中的-webkit-前缀。您需要{ {1}}适用于iOS / Safari。

Answer 2

---

注意

---

再次查看代码后，很明显您在保证金离开后遗漏了;，因此浏览器忽略了它（因此您的代码无效）。但是，您可能会发现使用left, right, top and bottom属性更好的替代方法：

---

我的方法

---

因为您使用的是position: absolute;，并且您的div宽度为60％，所以您可以使用：

left:20%;

因为你的宽度是60％;留下40％的屏幕。

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

离开：

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

<div class="welcome">
</div>

Answer 3

margin-left无法与position: absolute一起正常使用（至少不是您使用它的方式）。

你应该写的是：

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

这将使div居中。

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

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

这是有效的，并且是margin-left与position: absolute一起使用的“正确”方式。

Answer 4

.welcome{
 margin-left:20%
  font-size: 10px;
   border:1px solid #6AA121;
    width :60%;
    height:100px;
   background-color:#C3FDB8;
    position: relative; /* change absolute to relative */
  margin : auto; /* & set margin to auto*/
 }

<div class="welcome">
   </div>

Answer 5

请尝试以下操作： DEMO

如果不需要绝对位置，那么使用如下：  CSS：

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

如果您需要排名：绝对，则使用如下： DEMO

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

Answer 6

您需要指定宽度，然后将边距设置为自动。 E.g：

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

将左边距和右边距设置为自动（如上所述）将使div居中。如果你在没有设置宽度的情况下这样做，div仍然会居中，但会填满屏幕（或者至少是前一个div），所以你不能告诉你。

使用position:absolute并不是一个好主意，除非你需要它来处理在问题中不明显的其他事情。

Answer 7

我认为你可以尝试一种更简单的方法。尝试删除绝对定位并在auto上设置左边距和右边距。如下例所示。

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