Простой центр объекта с CSS и без хаков

Я хочу центрировать объект с помощью CSS и без хаков, возможно ли это и как?

Я пробовал это, но мой тэг не исчез.

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

Ответы

Ответ 1

Есть несколько способов центрировать элемент. Но это зависит от того, что ваш элемент и как мы его отображать:

  • Если у вас {display:inline; }

    Это просто. Вы можете просто использовать "text-align: center"; к центру текста, изображений и divs.

  • Если у вас есть {display:block;}

    Это немного сложнее. Это зависит от того, как позиционируется ваш объект. Ваш объект может быть относительным, абсолютным или фиксированным.

    • Если он относительный; то вы можете использовать "margin:0 auto;", однако вам потребуется значение ширины.

    • Если он абсолютно позиционирован, вам необходимо указать значения "top:" и "left:". Вам также понадобится ширина. Если вы знаете ширину элемента, лучший способ - использовать {left:50%; margin-left:-X}, где X = 1/2 ширина элемента.

Ответ 2

HTML:

<div>Centered</div>

CSS

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

Пример в реальном времени: http://jsfiddle.net/v3WL5/

Обратите внимание, что margin: 0 auto; будет иметь эффект, если div имеет ширину.

Ответ 3

Используйте margin: auto следующим образом:

margin: 0px auto

Ответ 4

Используйте это для общих целей. Даже span или div, который находится внутри всего: 

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

Ответ 6

если вам не нужна позиция: исправлено; вы можете просто использовать

<center>
Hello
</center>

Это устарело в HTML5