CSS 位置使用元素的中心使用百分比来定位元素 [英] CSS Position using center of element to position element using percentage

问题描述

所以我正在制作一个网站，我刚刚意识到当我想定位 html 元素时，它将使用它的右侧来定位元素.这是我的意思的一个例子.我试图使用百分比将图像定位在中心.我的 css 代码的精简版本:.image{position:absolute;right:50%;因此，当我加载网站时，它以图片的 50% 的右角显示，而不是 50% 的图像中心.无论如何定位使用图像的中心将图片定位在 50%，而不是图片的左侧或右侧边缘位于 50%?我不想要像 position:absolue;right:45% 这样的东西来移动图片，而是使用图片的中心来定位图片.如果您需要更多说明，请告诉我.

Hi so I was making a website and I just realized that it when I want to position the html element, it will position the element using the right side of it. Here's an example of what I mean. I was trying to position an image in the center using percentages. Trimmed down version of my css code: .image{position:absolute;right:50%; So when I loaded the website, it shows up with the right corner of the picture at 50%, not the center of the image at 50%. Is there anyway to position using center of the image to position the picture at 50%, and not the left or right edge of the picture being at 50%? I don't want something like position:absolue;right:45% to move the picture over, but instead use the center of the picture to position the picture. If you need any more clarification just let me know.

推荐答案

设置图片的宽度，然后设置左右边距为自动.

Set a width for the image and then set the left and right margins to auto.

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

这篇关于CSS 位置使用元素的中心使用百分比来定位元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！