Fatal编程技术网
  • html/
  • Html 如何使用transform:translate从水平和垂直方向移动元素中心

Html 如何使用transform:translate从水平和垂直方向移动元素中心

html css

Html 如何使用transform:translate从水平和垂直方向移动元素中心,html,css,Html,Css,我正试图从水平和垂直两个方向移动我的分区中心，但它不起作用。这是我的密码 <body> <div class="main"></div> </body> 默认情况下，每个元素都是静态的，这意味着您无法移动它们。因此，将此添加到您的规则中 position: relative; 所以你可以移动它 单击此处了解有关位置的更多信息我相信要完成该技巧，您需要绝对位置和50%的上/左值 .main{ 宽度：100px； 高度：100px； 背景

我正试图从水平和垂直两个方向移动我的分区中心，但它不起作用。这是我的密码

<body>
    <div class="main"></div>
</body>
默认情况下，每个元素都是静态的，这意味着您无法移动它们。因此，将此添加到您的规则中

position: relative;
所以你可以移动它

单击此处了解有关
位置的更多信息
我相信要完成该技巧，您需要绝对位置和50%的上/左值



.main{
宽度：100px；
高度：100px；
背景色：红色；
转换：翻译（-50%，-50%）；
位置：绝对位置；
左：50%；
最高：50%；
}




试试这个

使用
transform:translate（）时
您应该使用
位置：绝对到元素


position: absolute
right: 50%;
bottom: 50%;
transform: translate(50%,50%);





position: absolute
right: 50%;
bottom: 50%;
transform: translate(50%,50%);