Html 在屏幕中央对齐文本

为什么这不起作用

我有这个：

<div class="center">
  <div class="line">
    text
  </div>
  <div class="line">
    text2
  </div>
  <div class="line">
    text3
  </div>
</div>

为什么.center css不工作？我希望它位于屏幕的中央，但它会将它放在左角。

更改。将其居中设置为：

---

给.center一个宽度，或者它假设为100%，没有余量：

.center {
    margin: 0 auto;
    width: 50%;
}

---

你为什么不试试这个：

.line {
text-align:center;
display: inline-Block;
width: 150px;
}

.center{ 
display: inline-block;
}

这是因为中间的div占据了整个页面的宽度。行div与中间div的左侧对齐。如果指定中间div的宽度，它将显示在页面的中心。我给你举了个例子：

---

如果移除宽度：470px；排队，你会看到发生了什么。我添加了一个黑色的div边框，只是为了显示每个div的位置和大小。

margin:0 auto不会将文本居中，而是将该div居中于其父容器内使用jQuery$'selector'。css'text-align'，'center'；不是文本，我需要对齐中心孔线css，我有输入字段在这一行，我只把文本的例子。。。

.line {
text-align:center;
display: inline-Block;
width: 150px;
}

.center{ 
display: inline-block;
}