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

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

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

HTML：

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

CSS：

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

1. 第二种方法：如果你知道元素的宽度（.image）。假设它是 400px 宽：

CSS

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

有点棘手，当屏幕宽度小于元素宽度时会导致问题。