@Mansur05

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

Есть код, простые 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
  • Вопрос задан
  • 112 просмотров
Решения вопроса 1
Mansur05 , вы приводите абстрактный пример, решение которого может не быть решением в другой ситуации.
В приведенном Вами коде решение следующее.

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

Ответ написан
Пригласить эксперта
Ответы на вопрос 4
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% - половина_ширины_блока);
}
Ответ написан
@yariknashivan
.btn-group-vertical {
    left:50%;
    top: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 - половина ширины блока с кнопками
Ответ написан
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы