简单的中心是一个带有CSS而且没有黑客的对象

Question

我想使用CSS将对象居中并且没有黑客，这是可能的以及如何？

我试过这个，但是我的p标签已经消失了。

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

Answer 1

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

• 如果你有{display:inline; } 这很简单。你可以使用“text-align：center;”以文本，图像和div为中心。
• 如果你有{display:block;} 这有点困难。这取决于对象的定位方式。您的对象可以是相对的，绝对的或固定的。 如果是相对的;然后你可以使用"margin:0 auto;"，但是你需要一个宽度值。 如果它是绝对定位的，那么你需要指定你的"top:"和"left:"值。你还需要一个宽度。如果你知道元素的宽度，最好的方法是使用{left:50%; margin-left:-X}，其中X =元素宽度的1/2。

Answer 2

HTML：

<div>Centered</div>

CSS：

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

实例：http://jsfiddle.net/v3WL5/

请注意，如果margin: 0 auto;有宽度，div只会产生影响。

Answer 3

像这样使用margin: auto：

margin: 0px auto

Answer 4

将其用于一般用途。甚至跨越任何内部的跨度或div：

width:inherit; display:block;margin:0 auto;

Answer 5

用法：

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

Answer 6

在比赛的后期，你有没有尝试与父母的display:flex？

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

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

这是相对较新但supported at ~98% of major browsers。

但是我建议您稍微了解一下flexBox，它起初可能看起来很复杂，但它对所有类型的布局都非常强大！

Answer 7

如果你不需要担任职务：固定;你可以使用

<center>
Hello
</center>

这在HTML5中已弃用