Задать вопрос
@Mansur05
html

Как мне расположить объект точно в центре, независимо от экрана пользователя?

Есть код, простые 3 кнопки, как их расположить в центре экрана?
<!DOCTYPE html>
<html lang="ru" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Brave tasks</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  </head>
  <body>
    <div class="btn-group-vertical" role="group" aria-label="Basic example">
      <button type="button" class="btn btn-secondary">Left</button>
      <button type="button" class="btn btn-secondary">Middle</button>
      <button type="button" class="btn btn-secondary">Right</button>
    </div>
  </body>
</html>

5d336b2a1c8dc830292364.jpeg
  • Вопрос задан
  • 114 просмотров
Комментировать
Подписаться 1 Простой Комментировать
Решения вопроса 1
hisbvdis
@hisbvdis
Mansur05 , вы приводите абстрактный пример, решение которого может не быть решением в другой ситуации.
В приведенном Вами коде решение следующее.

https://codepen.io/hisbvdis/pen/EqjvQb

Ответ написан
Комментировать
Комментировать
Пригласить эксперта
Ответы на вопрос 3
Lara164
@Lara164
начинающий верстальщик html, css
попробуйте
body{
display: flex;
justify-content: center;
align-items: center;
}

или второй вариант:

.btn-group-vertical{
position: absolute;
top:50%;
left:50%;
transform: translate(-50%, -50%);
}
Ответ написан
Комментировать
Комментировать
@DanKud 
.btn-group-vertical {
    position: absolute;
    top: calc(50% - половина_высоты_блока);
    left: calc(50% - половина_ширины_блока);
}
Ответ написан
Комментировать
Комментировать
uashkki
@uashkki
Frontend Developer
Первый способ:
body {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}


Второй способ:
.btn-group-vertical {
    position: absolute;
    top: calc(50% - 56px);
    left: calc(50% - 38px);
}

56px - половина высоты блока с кнопками
38px - половина ширины блока с кнопками
Ответ написан
Комментировать
Комментировать
Ваш ответ на вопрос

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

Похожие вопросы
Вакансии с Хабр Карьеры
Fullstack Developer под Wordpress
Future Search
от 90 000 до 150 000 ₽
JavaScript FullStack разработчик
Rocket • Смоленск
от 80 000 до 130 000 ₽
CRM Bitrix24 разработчик
World Vision Clinic • Москва
от 170 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Разработать дизайн приложений
22 дек. 2024, в 19:03
60000 руб./за проект
Веб-дизайн клининговой компании
22 дек. 2024, в 17:54
10000 руб./за проект
Нарисовать UX/UI дизайн для игры. Нарисовать несколько иконок для игры
22 дек. 2024, в 17:45
10000 руб./за проект
Ещё заказы