我已經嘗試過這個網站上的每個答案，但它不工作！如何垂直和水平對齊中心的圖像？
嘗試過助手，絕對位置和一些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>
對於IMG公司，中心，您需要家長拿着它（與100％的寬度）
在的中間屏幕請看下面的例子。
對於行的中心，你可以刪除height: 100vh;
.centered {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}<!DOCTYPE html>
<html>
<title>Title</title>
<head>
<style>
body {
background-color: rgb(18, 19, 19);
}
</style>
</head>
<body>
<div class="centered">
<img src="image.png" width="513" height="396" />
</div>
</body>
</html>使用position: absolute並給予top和left的圖像放在中心。
更好方法：使用flex
.image{
position:absolute;
top:46vh;
left:46vw;
transform: translate(-50%, -50%);
}<!DOCTYPE html>
<html>
<title>Title</title>
<head>
<style>
body {
background-color: rgb(18,19,19);
}
</style>
</head>
<body>
<img class="image" src="https://i.stack.imgur.com/CE5lz.png" width="50" height="50" />
</body>
</html>body {
position: absolute;
top:0;
bottom: 0;
left: 0;
right: 0;
display: flex;
align-items: center;
justify-content: center;
background: #fff;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div>
<img src="https://i.vimeocdn.com/portrait/58832_300x300" alt="">
</div>
</body>
</html>試試這個，它會中心的任何一種元素對其父：
.centerElement{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<img class="centerElement" src="image.png" width="513" height="396" />
把你的img放在一個然後使你的圖像位置相對，並使用填充頂部和填充左左中心你的圖像在你想要的位置！
由於某些原因，這不起作用。此外，調整窗口大小時圖像不會留在中心。 – Vulkan
你現在可以檢查@Vulkan，更新。我使用vh和vw來實現視口響應。 – bhansa
@bhansa如果我願意，單獨給予'top'和'left'可能*不會*在所有情況下都可以工作... – kukkuz