Почему div не находится вертикально по центру с transform3d внутри гибкого держателя в браузере chrome? - PullRequest
Новая
       40

Почему div не находится вертикально по центру с transform3d внутри гибкого держателя в браузере chrome?

0 голосов
/ 05 августа 2020

В приведенном ниже фрагменте у меня есть дочерний элемент div желтого цвета. А еще он внутри гибкого держателя. Когда я пытаюсь центрировать его по вертикали, используя ниже css

transform:translate3d(0,-50%,0); position:relative; top:50%

, он не выравнивается по центру в браузере chrome. Любая идея, почему он не выровнен по вертикали. Но он сосредоточен в других браузерах. В настоящее время моя версия браузера chrome - Version 84.0.4147.105

div {
  border: 1px solid red;
  box-sizing: border-box;
}
.flex-holder {
  display: flex;
  justify-content: space-evenly;
}
.box {
  border-color: blue;
}

.parent{
  height: 100%;
  display: flex;
  border-color: green;
  min-height: 150px;
}

.child {
  position: relative;
  background: yellow;
  height: 50%;
  top: 50%;
  transform: translate3d(0, -50%, 0);
}
<div class="flex-holder">
  <div class="box">
    BOX
  </div>
  <div class="box">
    <div class="parent">
      <div class="child">
        CENTER
      </div>
    </div>
  </div>
  <div class="box">
    BOX
  </div>
</div>

1 Ответ

1 голос
/ 05 августа 2020 

div {
  border: 1px solid red;
  box-sizing: border-box;
}
.flex-holder {
  display: flex;
  justify-content: space-evenly;
}
.box {
  border-color: blue;
}

.parent{
  height: 100%;
  display: flex;
  border-color: green;
  min-height: 150px;
}

.child {
  position: relative;
  background: yellow;
  align-self: center;
}
<div class="flex-holder">
  <div class="box">
    BOX
  </div>
  <div class="box">
    <div class="parent">
      <div class="child">
        CENTER
      </div>
    </div>
  </div>
  <div class="box">
    BOX
  </div>
</div>
...