Як вертикально вирівняти по центру вмісту div з визначеною шириною / висотою?

Яким був би правильним методом вертикального центрування будь-якого вмісту на певній ширині / висоті div.

У прикладі є два вмісти з різною висотою, що є найкращим способом вертикального центрування обох за допомогою класу .content. (і це працює для кожного браузера і без рішення table-cell)

Майте на увазі деякі рішення, але хотіли б знати інші ідеї, одна з яких використовує position:absolute; top:0; bottom: 0;і margin auto.

Я трохи дослідив це, і з того, що я виявив, у вас є чотири варіанти:

Версія 1: батьківський div з відображенням як комірка таблиці

Якщо ви не проти використовувати display:table-cellна своєму батьківському div, ви можете скористатися наступними параметрами:

.area{
    height: 100px;
    width: 100px;
    background: red;
    margin:10px;
    text-align: center;
    display:table-cell;
    vertical-align:middle;
}​

ДЕМО в прямому ефірі

Версія 2: батьківський div з блоком відображення та відображенням вмісту таблиці-комірки

.area{
    height: 100px;
    width: 100px;
    background: red;
    margin:10px;
    text-align: center;
    display:block;
}

.content {
    height: 100px;
    width: 100px;
    display:table-cell;
    vertical-align:middle;    
}​

ДЕМО в прямому ефірі

Версія 3: Батьківський div плаваючий та div вмісту як відображення комірки таблиці

.area{
    background: red;
    margin:10px;
    text-align: center;
    display:block;
    float: left;
}

.content {
    display:table-cell;
    vertical-align:middle;
    height: 100px;
    width: 100px;
}​

ДЕМО в прямому ефірі

Версія 4: Батьківська позиція div відносна з абсолютною позицією вмісту

Єдина проблема, з якою я стикалася з цією версією, полягає в тому, що, здається, вам доведеться створювати css для кожної конкретної реалізації. Причиною цього є те, що div вмісту має мати встановлену висоту, яку буде заповнювати ваш текст, і верхнє поле буде розраховано. Цю проблему можна побачити у демонстраційній версії. Ви можете змусити його працювати для кожного сценарію вручну, змінивши висоту% вмісту div та помноживши його на -5, щоб отримати верхнє значення поля.

.area{
    position:relative; 
    display:block;
    height:100px;
    width:100px;
    border:1px solid black;
    background:red;
    margin:10px;
}

.content { 
    position:absolute;
    top:50%; 
    height:50%; 
    width:100px;
    margin-top:-25%;
    text-align:center;
}​

ДЕМО в прямому ефірі

Це також можна зробити, використовуючи display: flexлише кілька рядків коду. Ось приклад:

.container {
  width: 100px;
  height: 100px;
  display: flex;
  align-items: center;
}

Демо в прямому ефірі

Я знайшов це рішення в цій статті

.parent-element {
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

.element {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

Це працює як шарм, якщо висота елемента не фіксована.

margin: all_four_margin

надавши 50% для all_four_margin помістить елемент в центр

style="margin: 50%"

Ви можете застосувати його для наступних дій

поле: верхній правий нижній лівий

поле: верхній правий і лівий нижній

поле: верхній і нижній правий і лівий

даючи відповідні%, ми отримуємо елемент де завгодно.