How can I position an object exactly in the center, regardless of the user's screen?

M

Mansur052019-07-20 22:28:13

css

Mansur05, 2019-07-20 22:28:13

There is a code, simple 3 buttons, how to place them in the center of the screen?

<!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>

Reply

Answer the question

In order to leave comments, you need to log in

4 answer(s)

R

Roma Zvarich, 2019-07-20
@Mansur05

Mansur05 , you provide an abstract example whose solution may not be a solution in another situation.
In the code you provided, the solution is as follows.
https://codepen.io/hisbvdis/pen/EqjvQb
snippet

L

Lara B, 2019-07-20
@Lara164

try
body{
display: flex;
justify-content: center;
align-items: center;
}
or the second option:
.btn-group-vertical{
position: absolute;
top:50%;
left:50%;
transform: translate(-50%, -50%);
}

D

DanKud, 2019-07-20
@DanKud

.btn-group-vertical {
    position: absolute;
    top: calc(50% - половина_высоты_блока);
    left: calc(50% - половина_ширины_блока);
}

K

Kirill Udaltsov, 2019-07-20
@uashkki

First way:

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 - half the height of the block with buttons
38px - half the width of the block with buttons