Я пытаюсь переместить мой центр деления как по горизонтали, так и по вертикали, но он не работает. Вот мой кодКак перемещать центр элемента как по горизонтали, так и по вертикали с помощью преобразования: translate
<body>
<div class="main"></div>
</body>
и код CSS
.main{
width: 100px;
height: 100px;
background-color: red;
transform: translate(50% ,50%);
}
Попробуйте это ..
при использовании transform: translate(); вы должны использовать position: absolute; к элементу.
position: absolute
right: 50%;
bottom: 50%;
transform: translate(50%,50%);
По умолчанию, каждый элемент является статическим, а значит, вы не можете перемещать их. Поэтому добавьте это в свое правило.
position: relative;
Таким образом, вы можете переместить его
Нажмите HERE, чтобы узнать больше о position
Я считаю, что для достижения этой трюк вам нужно абсолютное позиционирование и верхнее/левого значение 50%.
.main{
width: 100px;
height: 100px;
background-color: red;
transform: translate(-50%, -50%);
position: absolute;
left: 50%;
top: 50%;
}<body>
<div class="main"></div>
</body>