Question

我已尝试过本网站上的每个答案，但它无效！

尝试过帮助者，绝对位置和一些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>

Answer 1

对于img居中，你需要父母持有它（宽度为100％）

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

对于行的中心，您可以删除height: 100vh;

＆＃13;

.centered {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

＆＃13;

<!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>

＆＃13;

Answer 2

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

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

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

Answer 3

使用position: absolute并将top和left放置在中心位置。

更好的方法：使用flex

＆＃13;

.image{
  position:absolute;
  top:46vh;
  left:46vw;
  transform: translate(-50%, -50%);
}

＆＃13;

<!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>

＆＃13;

Answer 4

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>

Answer 5

将你的img放入a中，然后将你的图像位置设置为相对位置，并使用padding-top和padding-left将图像置于你想要的位置中心！

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

5 个答案: