Переводить X и Y процентные значения на основе высоты и ширины элементов?

Ответ 1

При использовании процента в переводе это относится к ширине или высоте самого себя. Взгляните на https://davidwalsh.name/css-vertical-center (demo):

Одна интересная вещь о преобразованиях CSS заключается в том, что при применении их с процентными значениями они основывают это значение на размерах элемента, который они реализуют, в отличие от свойств, таких как верхний, правый, нижний, левый, маржи и отступы, которые используют только родительские размеры (или в случае абсолютного позиционирования, в котором используется его ближайший относительный родитель).

Ответ 2

Вы можете использовать vw и vh для перевода на основе размера окна просмотра

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

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

Ответ 3

Что для меня работает только с 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% вверх и слева в зависимости от его размера (а не родительского). Это означает, что точка центра виджета будет перемещаться точно там, где была верхняя левая точка, которая ранее была настроена как центр родителя, и это то, что мы хотим.

Ответ 4

Чтобы использовать процент в свойстве translate, вы должны использовать 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)";​​​​​​​​​​​​​​​​​​​​​​​​​​

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

Ответ 5

Ваше утверждение абсолютно верно в отношении процентов, поступающих от самого переведенного элемента. Вместо использования свойства translate в вашем случае вы должны использовать абсолютное позиционирование, чтобы оставаться относительно родительского div. Я абсолютно позиционировал вертикально ваш красный div здесь: (не забывайте о добавлении позиции относительно родительского div.It нужно позиционировать, кроме статического по умолчанию):

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

Ответ 6

Вы также можете использовать один дополнительный блок и использовать для него переход, за исключением дочернего узла

Код 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;
}

Ответ 7

Вы можете сделать элемент абсолютным и использовать свойство left и top для получения процентного значения в качестве родительского.

Ответ 8

Его разветвлено с позиционированием, требуемым по следующему рабочему образцу 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%) будет позиционировать красный квадрат в соответствии с его центром

Ответ 9

Решение этой проблемы заключается не в том, чтобы использовать перевод вообще. Когда вы переводите элемент, выбранный вами процент зависит от его собственной высоты.

Если вы хотите поместить элемент на основе родительской высоты, используйте 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;
}