Сдвиг элемента по оси Y на 50% переместит его вниз на 50% от его собственной высоты, а не на 50% от высоты родителей, как я ожидал. Как указать элементу перевода, чтобы он основывал процент перевода на родительском элементе? Или я чего-то не понимаю?
css
translate
percentage
translate3d
Эндрю Тиббетс
источник
источник
Ответы:
При использовании процента в translate это относится к ширине или высоте самого себя. Взгляните на https://davidwalsh.name/css-vertical-center ( демо ):
источник
transform: translate(50%)
похоже, используется ширина и высота родительского элементаВы можете использовать 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%); }
Как это устроено:
источник
Чтобы использовать процент в свойстве 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)";
Я надеюсь, что смогу помочь вам и сказать мне, если у вас возникнут другие проблемы.
источник
Ваше утверждение абсолютно верно относительно процентов, исходящих от самого переведенного элемента. Вместо использования свойства 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%); }
ноты :
источник
Решение этой проблемы - вообще не использовать переводчик. Когда вы переводите элемент, процент, который вы выбираете, зависит от его собственной высоты.
Если вы хотите расположить элемент на основе высоты родителя, используйте 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; }
источник