简单的中心是一个带有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宽度才会产生效果.