Центр div вертикально и горизонтально без определенной высоты

Я хочу отобразить div в центре моей страницы без необходимости определять высоту набора для элемента, чтобы высота соответствовала содержанию страницы динамически. Это возможно? Я открыт для использования решений JS/jQuery, если у них есть изящные резервные копии, но я предпочел бы чистое решение CSS.

Вот мой текущий код, он будет центрировать div, но я должен включить высоту.

HTML

    <div class="card">Lorem ipsum dolor sit amet, minim molestie argumentum est at, 
pri legere torquatos instructior ex. Vis id odio atomorum oportere, quem modo fabellas sit 
at, dicat semper est ne. Apeirian detraxit pri eu. No solum accusam has. Ius ne harum mundi 
clita, eu pro tation audiam.
    </div>

CSS

.card {
    background-color: #1d1d1d; /* IE fallback */
    background-color: rgba(29, 29, 29, 0.95);
    color: #fff;
    display: inline-block;
    margin: auto;
    position: absolute;
    bottom: 0;
    top: 0;
    left: 0;
    right: 0;   
    padding: 30px 35px;
    outline: 2px solid #3B3A37;
    outline-offset: -9px;
    width: 320px;
    height: 350px;
    /*margin: 0 auto;*/
}

Ссылка на скрипт

Этот вопрос отличается от предыдущих тем из-за времени, когда он был задан, аналогичный вопрос, по которому он был сопоставлен, датирован 2011 годом, в котором многое изменилось, и новые функции были добавлены в CSS3, которые могли бы выполнить лучше.

+6
источник поделиться
2 ответа

Вы можете сделать это, установив top:50%; и transform: translateY(-50%); в .card

JSFiddle - DEMO или Полноэкранный просмотр

CSS

html, body {
    height:100%;
    margin: 0px;
}
.card {
    background-color: #1d1d1d;
    /* IE fallback */
    background-color: rgba(29, 29, 29, 0.95);
    color: #fff;
    padding: 30px 35px;
    outline: 2px solid #3B3A37;
    outline-offset: -9px;
    width: 320px;
    position: relative;
    margin: 0 auto;
    top:50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
}

Для получения дополнительной информации:

+8
источник

Если вы хотите использовать только CSS-решение без указания высоты:

  • Вы можете использовать css3 flexbox:

    body {
      display:flex;
      align-items:center;
    }
    

    Обновлено Fiddle

  • Или вы можете использовать технику перевода:

    .card {
      position: absolute;
      top: 50%;
      left:50%;
      transform: translateX(-50%) translateY(-50%);
      /* other styles */
    }
    

    Обновлено Fiddle

поддержка браузера:

Боковое примечание. Возможно, вам понадобятся резервные копии js, если вы хотите поддерживать старые браузеры.

+4
источник

Посмотрите другие вопросы по меткам или Задайте вопрос