Html 如何在中心垂直和水平对齐图像？_Html_Css

Html 如何在中心垂直和水平对齐图像？

html css

Html 如何在中心垂直和水平对齐图像？,html,css,Html,Css,我在这个网站上尝试了所有答案，但都不起作用尝试助手，绝对位置和一些CSS <!DOCTYPE html> <html> <title>Title</title> <head> <style> body { background-color: rgb(18,19,19); } </style> </head> <body> <img src="image.png" w

我在这个网站上尝试了所有答案，但都不起作用

尝试助手，绝对位置和一些CSS

<!DOCTYPE html>
<html>
<title>Title</title>
<head>
<style>

body {

    background-color: rgb(18,19,19);
}

</style>
</head>
<body>

<img src="image.png" width="513" height="396" />

</body>
</html>


标题
身体{
背景色：rgb（18,19,19）；
}

使用

位置：绝对

并给出

顶部

和

左侧

将图像置于中间

更好的方法：使用

.image{
位置：绝对位置；
顶部：46vh；
左：46vw；
转换：翻译（-50%，-50%）；
}


标题
身体{
背景色：rgb（18,19,19）；
}

要使img居中，您需要一个家长来托住它（100%宽度）

在屏幕中间，请参见下面的示例

对于行的中心，您可以删除高度：100vh

.centered{
显示器：flex；
对齐项目：居中；
证明内容：中心；
高度：100vh；
}


标题
身体{
背景色：rgb（18,19,19）；
}

正文{
位置：绝对位置；
排名：0；
底部：0；
左：0；
右：0；
显示器：flex；
对齐项目：居中；
证明内容：中心；
背景：#fff；
}


JS-Bin

尝试此操作，它会将任何类型的元素置于其父元素的中心：

.centerElement{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

<img class="centerElement" src="image.png" width="513" height="396" />

.centerElement{
位置：绝对位置；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
}

将您的img置于中间位置，然后将图像位置设置为相对位置，并使用顶部填充和左侧填充将图像居中放置在您想要的位置

出于某种原因，这不起作用。另外，调整窗口大小时，图像不会停留在中心。您现在可以检查@Vulkan，updated吗。我已经使用vh和vw进行视口响应。@bhansa如果可以的话，单独给出

top

和

left

可能在所有情况下都不起作用…@kukkuz你有什么建议，请告诉我。见Elias MP