如何在中心垂直和水平对齐图像？ [复制]答案

【问题标题】：How to vertically and horizontaly align an image in the center? [duplicate]如何在中心垂直和水平对齐图像？ [复制]
【发布时间】：2017-09-22 16:48:22
【问题描述】：

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

尝试过的助手、绝对位置和一些 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>

【问题讨论】：

标签： html css

【解决方案1】：

要使 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>

【讨论】：

【解决方案2】：

试试这个，它会将任何类型的元素与其父元素居中：

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

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

【讨论】：

【解决方案3】：

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>

【讨论】：

【解决方案4】：

使用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>

【讨论】：

由于某种原因这不起作用。调整窗口大小时，图像也不会停留在中心。
您现在可以查看@Vulkan，已更新。我已经使用 vh 和 vw 来实现视口响应。
@bhansa 如果可以的话，单独提供top 和left 可能不在所有情况下都有效...
@kukkuz 那你有什么建议，请告诉。
见 Elias MP 的answer

【解决方案5】：

将您的 img 放入 a 然后使您的图像位置相对，并使用 padding-top 和 padding-left 将您的图像居中在您想要的位置！

【讨论】：