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 回答