Перекласти значення відсотків 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%);
}

Як це працює:

• розташування зверху та ліворуч переміщує дочірній віджет відповідно до батьківських координат. У верхньому лівому куті дочірнього віджета з’явиться саме в центрі батьківського (зараз це не те, що ми хочемо).
• переклад перемістить дочірній віджет -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;
}

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

Сподіваюся, я міг би вам допомогти і сказати, якщо у вас є якісь інші проблеми.

Ваше твердження є абсолютно правильним щодо відсотків, що надходять від самого перекладеного елемента. Замість використання властивості 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. за допомогою перетворення: перекласти (-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;
}