Question

嗨所以我正在制作一个网站，我刚刚意识到，当我想要定位html元素时，它将使用它的右侧定位元素。这是我的意思的一个例子。我试图用百分比将图像放在中心。修剪了我的css代码版本：.image{position:absolute;right:50%; 因此，当我加载网站时，它显示图片的右角为50％，而不是50％的图像中心。无论如何使用图像中心定位图片的位置为50％，而不是图片的左边缘或右边缘为50％？我不希望像position:absolue;right:45%这样的东西移动图片，而是使用图片的中心来定位图片。如果您需要进一步澄清，请告诉我。

Answer 1

设置图像的宽度，然后将左右边距设置为自动。

` {width: whatever you want; margin-left: auto; margin-right: auto; }  `

Answer 2

当您要定位的元素位于某个容器内时，您可以使用text-align轻松完成，即：

HTML：

    <div class="container">
        <div class="image">Center me!</div>
   </div>

CSS：

    .container { text-align: center }
    .image { display: inline-block }

第二种方法：如果你知道元素的宽度（.image）。让我们说它是400px宽：

CSS

    .image {
        position: absolute;
        left: 50%;
        margin-left: -200px;
    }

有点棘手，当屏幕宽度低于元素宽度时会引起问题。

CSS使用元素中心定位元素使用百分比

2 个答案: