Question

我在CSS中定位时注意到了：

.image {
    position: relative;
    top: 10%;
    left: 50%;
}

＆＃34;起源＆＃34;始终是左上角。无论如何改变这个起源说中心？

Answer 1

在top设置left和.image属性，即设置左上角相对于其正常位置的位置;

在包装器内的相对定位块中，它将与包装器父级的原点相同（假设没有任何其他同级节点影响位置）;

设置top:50%; left:50%您将原点移动到父级的中心。

如果您想将原点更正为图像的中心，可以使用transform:translate(-50%,-50%)（此定位相对于.image的宽度/高度）

这是一个例子：

.image {
    position: relative;
    top: 50%;
    left: 50%;
    height:200px;
    width:200px;
    background:red;
    transform:translate(-50%,-50%)
}

section{
    width:100%;
    height:600px;
    border:1px solid;
}

<section>
    <div class='image'></div>
</section>

Answer 2

没有

理解这些属性如何与相对定位一起工作的关键是要意识到它们指定了应用移动的边，而不是移动方向。

换句话说，top属性相对于其上边缘移动框，left属性相对于其左边缘移动框，依此类推。盒子偏离指定的边缘，因此top：1em将盒子1em从顶部位置移开 - 换句话说，向下移动。负数在相反方向移动框，因此底部：-1em与顶部相同：1em。

来源： W3 org Wiki

另一种方法是使用CSS3转换。

转换的默认来源（transform-origin）为center center。

Answer 3

要找到任何2D的中心，请将其宽度和高度除以二。

您可以这样做，并使用calc（）将CSS位置居中放置，如下所示：

top: calc(50% - (HEIGHT / 2));
left: calc(50% - (WIDTH / 2));

示例：

.origin-center {
  position: absolute;
  top: calc(50% - (36px / 2));
  left: calc(50% - (42px / 2));
  height: 36px;
  width: 42px;
}

Answer 4

没有。可能的绝对/相对/固定定位来源为top，left，bottom，right。

Answer 5

＆＃13;

$(window).on('resize', function () {
    $('.img_name').css('margin-top', function () {
        return ($(window).height() - $(this).height()) / 2
    });
}).resize();

＆＃13;

.img_name{width:150px;margin:0 auto;}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<div class="img_name"><img src="https://i.stack.imgur.com/RN9nh.png?s=328&g=1" width="150px" alt="" /></div>

＆＃13;

使用它支持所有视口。

定位原点CSS

5 个答案: