Задать вопрос
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));
}
  • Вопрос задан
  • 4324 просмотра
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 комментария
Пригласить эксперта
Ваш ответ на вопрос

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

Похожие вопросы
Вакансии с Хабр Карьеры
Fullstack Developer под Wordpress
Future Search
от 90 000 до 150 000 ₽
JavaScript FullStack разработчик
Rocket • Смоленск
от 80 000 до 130 000 ₽
Trainee - IT Support
move2usajobs LLC • Лос-Анджелес
от 2 000 до 4 000 $
Ещё вакансии
Заказы с Хабр Фриланса
После обновления перестал работать старый сайт на Wordpress
23 нояб. 2024, в 19:29
750 руб./за проект
Требуется реализовать backend-часть проекта
23 нояб. 2024, в 19:14
35000 руб./за проект
Развернуть OpenSource софт на сервере
23 нояб. 2024, в 17:32
5000 руб./за проект
Ещё заказы