Как поместить div в центр другого div, если дочерний div выходит за границы основного

Question

Не подскажите как я могу расположить с помощью CSS серый квадрат в центре черной линии, при чем что-бы если если я добавлял такой-же серый квадрат к другой полосе, он тоже вставал в центр ее.

* {
    padding: 0;
    margin: 0;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
body {
    background-color: lightcoral;
}
#piano {
    background-color: aquamarine;
    width: 40vw;
    height: 100vh;
    margin: 0 auto;
    display: flex;
    align-content: space-evenly;
    justify-content: space-evenly;
}
.line {
    background-color: black;
    width: 1vw;
    height: 100vh;
}
.tile {
    position: absolute;
    background-color: gray;
    width: 7vw;
    height: 7vw;
}

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width">
        <meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' />
        <title>Piano</title>
        <link rel="stylesheet" type="text/css" href="style.css" />
    </head>
    <body>
        <div id="piano">
            <div class="line" id="line1">
                <div class="tile"><!--Plz Appear--></div>
            </div>
            <div class="line" id="line2"></div>
            <div class="line" id="line3"></div>
            <div class="line" id="line4"></div>
        </div>
    </body>
</html>

Answer 1

Сделать можно что угодно, если хотя бы пролистать учебник по CSS. Но, тут проблема другая - подход изначально неверный.

* {
  margin: 0;
  padding: 0;
  user-select: none;
}

body {
  background-color: lightcoral;
}

#piano {
  margin: 0 auto;
  display: flex;
  justify-content: space-evenly;
  align-content: space-evenly;
  height: 100vh;
  width: 40vw;
  background-color: aquamarine;
}

.line {
  height: 100vh;
  width: 1vw;
  background-color: black;
}

.tile {
  position: absolute;
  height: 7vw;
  width: 7vw;
  background-color: gray;
  /* Добавлено */
  transform: translateX(calc(.5vw - 50%));
}

<div id="piano">
  <div class="line" id="line1">
    <div class="tile">
      <!--Plz Appear-->
    </div>
  </div>
  <div class="line" id="line2">
    <div class="tile">
      <!--Plz Appear-->
    </div>
  </div>
  <div class="line" id="line3">
    <div class="tile">
      <!--Plz Appear-->
    </div>
  </div>
  <div class="line" id="line4">
    <div class="tile">
      <!--Plz Appear-->
    </div>
  </div>
</div>

БЛОГ НА HUSL

Как поместить div в центр другого div, если дочерний div выходит за границы основного

Ответы (1 шт):