요소 높이와 너비를 기준으로 X 및 Y 백분율 값을 번역 하시겠습니까?

요소 Y 축을 50 % 변환하면 예상대로 상위 높이의 50 %가 아니라 자체 높이의 50 % 아래로 이동합니다. 번역 요소가 상위 요소를 기준으로 번역 비율을 결정하도록하려면 어떻게해야합니까? 아니면 내가 뭔가를 이해하지 못하고 있습니까?

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

번역에서 백분율을 사용할 때 그것은 자신의 너비 또는 높이를 나타냅니다. https://davidwalsh.name/css-vertical-center ( 데모 )를 살펴보십시오 .

CSS 변환에 대한 한 가지 흥미로운 점은 백분율 값으로 적용 할 때 해당 값이 상단, 오른쪽, 하단, 왼쪽, 여백 및 패딩과 같은 속성과는 반대로 구현되는 요소의 크기에 기반한다는 것입니다. , 부모의 치수 만 사용합니다 (또는 가장 가까운 상대적인 부모를 사용하는 절대 위치의 경우).

vw 및 vh를 사용하여 뷰포트 크기에 따라 변환 할 수 있습니다.

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

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

CSS 만 사용하여 저에게 적합한 것은 다음과 같습니다.

.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%);
}

작동 원리 :

• 상단 및 왼쪽 위치는 상위 좌표에 따라 하위 위젯을 이동합니다. 자식 위젯의 왼쪽 상단 모서리는 부모의 중앙에 정확히 나타납니다 (현재 우리가 원하는 것은 아닙니다).
• translation은 자식 위젯을 크기 (부모가 아님)에 따라 위쪽과 왼쪽으로 -50 % 이동합니다. 즉, 위젯의 중심점이 이전에 부모의 중심으로 설정되었던 왼쪽 상단 지점이 있던 위치로 정확히 이동되며 이것이 우리가 원하는 것입니다.

번역 속성에서 백분율을 사용하려면 Javascript를 사용해야합니다. http://jsfiddle.net/4wqEm/27/

HTML 코드 :

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

CSS 코드 :

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

자바 스크립트 코드 :

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)";​​​​​​​​​​​​​​​​​​​​​​​​​​

다른 문제가 있으면 제가 당신을 도울 수 있기를 바랍니다.

귀하의 진술은 바로 번역 된 요소에서 나오는 백분율에 대해 절대적으로 옳습니다. 귀하의 경우에 translate 속성을 사용하는 대신 절대 위치를 사용하여 상위 div에 상대적으로 유지해야합니다. 여기에 빨간색 div를 수직으로 배치했습니다. (부모 div에 상대적인 위치를 추가하는 것을 잊지 마십시오. 정적 기본값이 아닌 다른 위치에 있어야 함) :

여기 js 바이올린 펜

 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%;
    }

하나의 추가 블록을 사용하고 하위 노드를 제외하고 전환을 사용할 수도 있습니다.

HTML 코드 :

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

CSS는 다음과 같아야합니다.

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

요소를 절대 위치로 만들고 left 및 top 속성을 사용하여 백분율 값을 부모로 사용할 수 있습니다.

다음 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%);
}

메모 :

1. 부모 요소를 상대 위치로 변경하여 빨간색 사각형의 절대 위치를 지정할 수 있습니다.
2. 그런 다음 50 % 상단 및 50 % 왼쪽을 사용하면 왼쪽 상단 모서리에 따라 빨간색 사각형이 배치됩니다.
3. transform : translate (-50 %,-50 %)를 사용하면 중앙에 따라 빨간색 사각형이 배치됩니다.

이 문제에 대한 해결책은 번역을 전혀 사용하지 않는 것입니다. 요소를 변환 할 때 선택한 백분율은 해당 높이를 기반으로합니다.

부모의 높이를 기준으로 요소를 배치하려면 top : 50 %;

따라서 코드는 다음과 같습니다.

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;
}