Выравнивание центра с табличной ячейкой

Я пытаюсь использовать метод table-cell для центрирования div по вертикали и по горизонтали.

Он работает, когда я использую следующий код:

div {
    display: table;
}
.logo {
    display: table-cell;
    position: absolute;
    vertical-align: middle;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    margin: auto;
}

Но я предпочитаю переносить .logo в другой div, называемый .center, как здесь JSFiddle, но по какой-то причине, хотя он работает в JSFiddle, он не работает для меня на моем сайте.

Ответ 1

Вот хорошая отправная точка.

HTML:

<div class="containing-table">
    <div class="centre-align">
        <div class="content"></div>
    </div>
</div>

CSS

.containing-table {
    display: table;
    width: 100%;
    height: 400px; /* for demo only */
    border: 1px dotted blue;
}
.centre-align {
    padding: 10px;
    border: 1px dashed gray;
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}
.content {
    width: 50px;
    height: 50px;
    background-color: red;
    display: inline-block;
    vertical-align: top; /* Removes the extra white space below the baseline */
}

См. демонстрацию по адресу: http://jsfiddle.net/audetwebdesign/jSVyY/

.containing-table устанавливает контекст ширины и высоты для .centre-align (table-cell).

Вы можете применить text-align и vertical-align для изменения .centre-align по мере необходимости.

Обратите внимание, что .content необходимо использовать display: inline-block, если его нужно центрировать по горизонтали, используя свойство text-align.

Ответ 2

Это было бы легче сделать с flexbox. Использование flexbox позволит вам не указывать высоту вашего контента и автоматически настраивать его на высоте, которую он содержит.

DEMO

здесь суть демонстрации

.container{

  display: flex;
  height: 100%;
  justify-content: center;
  align-items: center;

}

HTML

<div class="container">
  <div class='content'> //you can size this anyway you want
    put anything you want here,
  </div>
</div>