CSS Position using center of element 使用百分比定位元素

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 Position using center of element 使用百分比定位元素

CSS Position using center of element to position element using percentage

html

css

position

absolute