24

我想使用 CSS 将对象居中而不使用 hack，这可能吗？如何？

我已经尝试过了，但是我的 p 标签不见了。

.centered {
  position: fixed;
  top: 50%;
  left: 50%;
}
4

7 回答 7

39

有几种方法可以使元素居中。但这取决于您的元素是什么以及我们选择如何显示它：

  • 如果你有{display:inline; }

    这很简单。您可以只使用“文本对齐：中心；” 使文本、图像和 div 居中。

  • 如果你有{display:block;}

    这有点困难。这取决于您的对象是如何定位的。您的对象可以是相对的、绝对的或固定的。

    • 如果是相对的；那么你可以使用"margin:0 auto;"，但是你需要一个宽度值。

    • 如果它是绝对定位的，那么你需要指定你的"top:"和"left:"值。你还需要一个宽度。如果您知道元素的宽度，最好的方法是使用{left:50%; margin-left:-X}，其中 X = 元素宽度的 1/2。

于 2013-02-14T21:02:52.627 回答
6

HTML：

<div>Centered</div>

CSS：

div {
    margin: 0 auto;
    width: 200px;
}

现场示例：http: //jsfiddle.net/v3WL5/

请注意，margin: 0 auto;只有当div具有宽度时才会生效。

于 2013-02-14T20:54:33.053 回答
1

像这样使用margin: auto：

margin: 0px auto
于 2013-02-14T20:52:28.520 回答
1

将此用于一般目的。甚至在任何内容中的 span 或 div ：

width:inherit; display:block;margin:0 auto;
于 2016-04-07T13:42:46.757 回答
0

用法 ：

  1. 在线使用：内容在这里....

  2. CSS 代码：

    #text-align { text-align:center }

HTML 代码：

<div id="text-align">Content goes here....</div>

http://www.techulator.com/resources/4299-center-Deprecated-tags-HTML.aspx

于 2014-01-02T07:17:09.633 回答
0

游戏迟到了，但是您尝试过使用display:flex父母吗？

我有一个有用的类，它很简单，适用于所有类型的元素：

/* apply this on the parent */
.center {
    display:flex;
    align-items: center; /*vertical alignement*/
    justify-content: center; /* horizontal alignement*/
}

这是相对较新的，但在大约 98% 的主要浏览器中都支持。

不过我建议你学习一下 flexBox，一开始它可能看起来很复杂，但它对所有类型的布局都非常强大！

于 2019-03-26T21:16:57.137 回答
-4

如果您不需要定位：固定；你可以使用

<center>
Hello
</center>

这在 HTML5 中已弃用

于 2013-11-22T10:56:16.413 回答