Задать вопрос
woonem
@woonem
css

Как получить высоту элемента без JS?

Привет :)
Использую такую некостлявую конструкцию для центрирования элементов:
.wrapper{
    text-align: center;
    width: 100%;
    height: 100vh;
}
.center{
    display: inline-block;
    width: 300px;
    height: 200px;
    border: 1px solid #000;
    margin-top: calc(50vh - 100px); /* 100px = 50% * this.height */
}

<html>
  <body>
    <div class="wrapper">
      <div class="center">
        centered block
      </div>
    </div>
  </body>
</html>

JSBin >

Но если высота неизвестна, как поставить правильный отступ?
Мне кажется есть возможность применять height элемента в CSS.
Если я ошибаюсь, другие конструкции не предлагайте, просто уведомите.
По моей памяти должно быть приблизительно вот так:
.center{
   /* ... */
   margin-top: calc(50vh - calc(attr(height) / 2));
}
  • Вопрос задан
  • 3973 просмотра
1 комментарий
Подписаться 2 Оценить 1 комментарий
Решения вопроса 3
werty1001
@werty1001
undefined
Можно например так, никаких this[height] в css нет.
Ответ написан
6 комментариев
6 комментариев
sadisme
@sadisme
font-size:30rem 
.wrapper{
    width: 100%;
    height: 100vh;
    display:flex;
    align-items:center;
    justify-content:center;
}
.center{
    display: inline-block;
    width: 300px;
    height: 200px;
    border: 1px solid #000;
    margin:auto;
}
Ответ написан
2 комментария
2 комментария
@vlad00777 
.wrapper{
    position:relative;
}
.center{
   position:absolute;
   top:50%;
   left:50%;
   transform:translate(-50%,-50%);
}


Или флекс, как писали выше.
Ответ написан
2 комментария
2 комментария
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript разработчик
вАйТи
от 5 000 до 25 000 ₽
Trainee - IT Support
move2usajobs.com LLC • Лос-Анджелес
от 2 000 до 4 000 $
React разработчик
Uptrade
от 150 000 до 200 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Создать простой зеро блок на тильда или html блок
02 мая 2024, в 11:31
500 руб./за проект
Ищем кодера для доработки сайта на bitrix24
02 мая 2024, в 11:28
1000 руб./в час
Создать сайт на WP
02 мая 2024, в 11:25
20000 руб./за проект
Ещё заказы