Czy przetłumaczyć wartości procentowe X i Y na podstawie wysokości i szerokości elementów?

Przesunięcie elementu osi Y o 50% spowoduje przesunięcie go w dół o 50% jego własnej wysokości, a nie o 50% wysokości rodziców, jak bym się spodziewał. Jak powiedzieć elementowi tłumaczącemu, aby oparł procent tłumaczenia na elemencie nadrzędnym? A może czegoś nie rozumiem?

http://jsfiddle.net/4wqEm/2/

Używając procentu w tłumaczeniu, odnosi się do szerokości lub wysokości samego siebie. Spójrz na https://davidwalsh.name/css-vertical-center ( demo ):

Interesującą rzeczą dotyczącą transformacji CSS jest to, że stosując je z wartościami procentowymi, opierają tę wartość na wymiarach elementu, na którym są implementowane, w przeciwieństwie do właściwości takich jak top, right, bottom, left, margin i padding , które używają tylko wymiarów rodzica (lub w przypadku pozycjonowania bezwzględnego, który używa swojego najbliższego krewnego rodzica).

Możesz użyć vw i vh, aby przetłumaczyć na podstawie rozmiaru widocznego obszaru

@keyframes bubbleup {
  0% {
    transform: translateY(100vh);
  }

  100% {
    transform: translateY(0vh);
  }
}

To, co działa u mnie tylko przy użyciu CSS, to:

.child {
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    /* Backward compatibility */
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
}

Jak to działa:

• pozycjonowanie w górę iw lewo przesuwa widżet podrzędny zgodnie ze współrzędnymi rodzica. Lewy górny róg widżetu dziecka pojawi się dokładnie na środku rodzica (nie tego chcemy w tej chwili).
• tłumaczenie przesunie widżet potomny -50% na górę i w lewo w zależności od jego rozmiaru (nie nadrzędnego). Oznacza to, że punkt środkowy widżetu zostanie przesunięty dokładnie tam, gdzie znajdował się lewy górny punkt - który wcześniej był ustawiony jako środek rodzica, a tego właśnie chcemy.

Aby użyć wartości procentowej we właściwości translate, musisz użyć Javascript: http://jsfiddle.net/4wqEm/27/

Kod HTML :

<div id="parent">
    <div id="children"></div>
</div>​​​​​​​​​​​​​

Kod CSS:

#parent {
    width: 200px;
    height: 200px;
    background: #ff0;
}
#children {
    width: 10%;
    height: 10%;
    background: #f00;
}

Kod JavaScript:

parent = document.getElementById('parent');
children = document.getElementById('children');

parent_height = parent.clientHeight;
​children_translate = parent_height * 50/100;
children.style.webkitTransform = "translateY("+children_translate+"px)";​​​​​​​​​​​​​​​​​​​​​​​​​​

Mam nadzieję, że mógłbym ci pomóc i powiedzieć mi, jeśli masz inny problem.

Twoje stwierdzenie jest całkowicie słuszne, jeśli chodzi o wartości procentowe pochodzące z samego przetłumaczonego elementu. Zamiast używać właściwości translate w twoim przypadku, powinieneś używać pozycjonowania bezwzględnego, aby pozostać względem nadrzędnego div. Ustawiłem tutaj absolutnie pionowo twój czerwony div: (nie zapomnij o dodaniu pozycji względem nadrzędnego div, musi być ustawiony inaczej niż statyczny domyślny):

js fiddle pen tutaj

 body {
    margin: 0;
    width: 100%;
    height: 100%;
    }
 body > div {
    width: 200px;
    height: 200px;
    background: #ff0;
    position: relative;
    }
 body > div > div {
    width: 10%;
    height: 10%;
    -webkit-transform: translateY(-50%);
    background: #f00;
    position: absolute;
    top: 50%;
    }

Możesz także użyć jednego dodatkowego bloku i użyć do niego przejścia, z wyjątkiem węzła podrzędnego

Kod HTML :

<div id="parent">
    <div id="childrenWrapper">    
        <div id="children"></div>
    </div>
</div>​​​​​​​​​​​​​

css powinno wyglądać mniej więcej tak

#parent {
    position: relative;
    width: 200px;
    height: 200px;
    background: #ff0;
}
#childrenWrapper{
    width: 100%;
    height: 100%;
}
#children {
    width: 10%;
    height: 10%;
    background: #f00;
}

Możesz ustawić element w pozycji bezwzględnej i użyć właściwości left i top, aby przyjąć wartość procentową jako element nadrzędny.

Jest rozwidlony z wymaganym pozycjonowaniem w poniższym przykładzie roboczym adresu URL

body {
margin: 0;
width: 100%;
height: 100%;
}

body>div {
position: relative;
width: 200px;
height: 200px;
background: #ff0;
}

body>div>div {
position: absolute;
left: 50%;
top: 50%;
width: 10%;
height: 10%;
background: #f00;
transform: translate(-50%, -50%);
}

uwagi:

1. możesz bezwzględnie ustawić swój czerwony kwadrat, zmieniając element nadrzędny na pozycję względną
2. wtedy użycie 50% do góry i 50% do lewej spowoduje umieszczenie czerwonego kwadratu zgodnie z jego lewym górnym rogiem
3. używając transform: translate (-50%, - 50%) ustawi czerwony kwadrat zgodnie z jego środkiem

Rozwiązaniem tego problemu jest w ogóle nie używać tłumaczenia. Kiedy tłumaczysz element, wartość procentowa, którą wybierasz, zależy od jego własnej wysokości.

Jeśli chcesz ustawić element na podstawie wysokości rodzica, użyj top: 50%;

Tak więc kod będzie wyglądał następująco:

body {
    margin: 0;
    width: 100%;
    height: 100%;
}
body > div {
    width: 200px;
    height: 200px;
    background: #ff0;
    position: relative;
}
body > div > div {
    position: absolute;
    top: 50%;
    width: 10%;
    height: 10%;
/*     -webkit-transform: translateY(50%); */
    background: #f00;
}