Абсолютное центрирование CSS

Недавно я наткнулся на этот метод, используемый для позиционирования элемента как по горизонтали, так и по вертикали в центр. Однако я не мог понять, что делает каждое из свойств. Кто-нибудь сможет объяснить мне, что влияет на установку top:0, bottom:0, left:0, right:0?

(Было бы здорово, если вы сможете объяснить это, используя термин непрофессионала или представить иллюстрацию.)

Кроме того, каково использование установки отображения в таблицу?

.absolute-center {
  position: absolute;
  display: table;
  height: auto;
  width: 500px;
  margin: auto;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  border: solid 1px red;
}

<p class="absolute-center">What is this sorcery?</p>

Ответы

Ответ 1

Вы можете уменьшить значение css:

.absolute-center {
    position:absolute;
    width: 500px;
    height: 100px;
    margin: auto;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    border: solid 1px red;
}

<p class="absolute-center">What is this sorcery?</p>

Ответ 2

Пусть немного сломается:

Если у вас есть следующий CSS (я применяю его к вашей текущей разметке):

.absolute-center {
    position:absolute;
    height: auto;
    margin: auto;
    background: red;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
}

Вы можете видеть, что div.absolute-center заполняет весь родительский элемент (в данном случае body), просто установив все свойства top, bottom, right и left.

Демо: http://jsfiddle.net/0osLv27k/

Поэтому, когда мы добавляем width (дополнительно height) к предыдущему CSS, этот элемент ограничен этим размером.

Демо: http://jsfiddle.net/0osLv27k/1/

И, наконец, магический margin: auto, который делает элемент центрированным.

Демо: http://jsfiddle.net/0osLv27k/2/

Ответ 3

Вам нужно только добавить верхнюю и левую позиции и добавить преобразование. Если вам не нужна фиксированная ширина, нет проблем с удалением width из css, а также если вы хотите, чтобы текст с центром внутри p добавлял дополнение, удалял его. Попробуйте следующее:

.absolute-center {
    position:absolute;
    width: 500px;
    padding:50px 0;
    top: 50%;
    left: 50%;
    border: solid 1px red;
    text-align:center;
    transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	-o-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
  display:inline-block;
  vertical-align:middle;
}

<p class="absolute-center">asdsdada</p>

Ответ 4

Проверьте это... HTML

<p class="absolute-center"></p>

CSS

.absolute-center {
    margin: auto;
    background: red; 
    width: 100px;
    height: 100px;
    position:absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
}