Question

我正在尝试将图像居中放置在容器中。

根据我的理解，将具有文本对齐方式属性设置为居中的容器的position设置为“ relative” 垂直将其position置于中心的块级元素属性设置为absolute。但是，为什么我的情况不是这样代码？

.first-container {
  background-color: yellow;
  height: 100%;
  position: relative;
  text-align: center;
  width: 100%;
}

.mountain {
  position: absolute;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="style.css">
  <title>Playground</title>
</head>

<body>
  <div class="first-container">
    <img class="mountain" src="images/mountain.png" alt="">
  </div>
  <div class="second-container">

  </div>
  <div class="third-container">

  </div>
</body>

</html>

我希望山峰图像位于第一个容器的中心，为便于区分，我将背景色设置为黄色。

Answer 1

在具有position: absolute的容器中的图像上使用position: relative时，图像位于在容器的中央。或者，更具体地说，图像的左上像素为中心。

为了使图像居中，以使图像的中心位于包含元素的中心，您需要将图像宽度的margin-left设置为负一半。这可以在下面看到，图像的宽度为100px，图像的宽度为margin-left: -50px：

.first-container {
  background-color: yellow;
  height: 100%;
  position: relative;
  text-align: center;
  width: 100%;
}

.mountain {
  position: absolute;
  margin-left: -50px;
}

<div class="first-container">
  <img class="mountain" src="https://placehold.it/100" alt="">
</div>

并且假设您在图片本身上设置了width，则可以使用calc()和{实际上使用CSS变量和width: var(--image-width)的组合来确定此边距{1}}。

margin-left: calc(var(--image-width) / -2)

:root {
  --image-width: 100px;
}

.first-container {
  background-color: yellow;
  height: 100%;
  position: relative;
  text-align: center;
  width: 100%;
}

.mountain {
  position: absolute;
  width: var(--image-width);
  margin-left: calc(var(--image-width) / -2);
}

Answer 2

您的代码是正确的，但是这里有一些错误，您需要将height属性设置为一些像素，然后才能看到图像。例如：

.first-container {
background-color: yellow;
height: 400px;
position: relative;
text-align: center;
width: 100%;
border: 1px solid black;
}

Answer 3

已添加

left: 50%;
transform: translateX(-50%);

到.mountain。希望这对您有所帮助。谢谢

.first-container {
  background-color: yellow;
  height: 100%;
  position: relative;
  width: 100%;
}

.mountain {
left: 50%;
transform: translateX(-50%);
  position: absolute;
  height: 100px;
  width: 100px;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="style.css">
  <title>Playground</title>
</head>

<body>
  <div class="first-container">
    <img class="mountain"src="https://upload.wikimedia.org/wikipedia/commons/4/4e/Artesonraju3.jpg" alt="">
  </div>
  <div class="second-container">

  </div>
  <div class="third-container">

  </div>
</body>

</html>

为什么png图像不位于父div的中心？

3 个答案: