html - 如何将框中的图像准确居中对齐(垂直和水平)

Question

在我的网页部分，我使用了一个图标库。我在 div 中插入图像/图标并通过 css 管理对齐中心(垂直和水平)。但我发现我的图像在我的 div 中垂直对齐中心而不是准确的中心。查看我的代码和 CSS。

CSS

#main {
width: 170px;
height: 300px;
border: 1px solid #c3c3c3;
display: -webkit-flex;
display: flex;
align-items: flex-start;
}

#main div{
width: 70px;
height: 70px;
align-self: center;
background:red;
}

和

html

<div id="main">
  <div></div>
</div>

查看我的 Example

如何在 body 或 div 中准确居中对齐我的图像？

Answer 1

您可以使用align-items: center 和justify-content: center

#main {
  width: 170px;
  height: 300px;
  border: 1px solid #c3c3c3;
  display: flex;
  align-items: center;
  justify-content: center;
}
#main div {
  width: 70px;
  height: 70px;
  background: red;
}

<div id="main">
  <div></div>
</div>

如果您在 #main 中有一些其他元素，但您希望 div 垂直和水平居中，您可以从元素中删除 div使用 position: absolute 流动并使用 transform: translate()。

#main {
  width: 170px;
  height: 300px;
  border: 1px solid #c3c3c3;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
#main div,
span {
  width: 70px;
  height: 70px;
  background: red;
}
span {
  align-self: flex-start;
  background: green;
}
#main div {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

<div id="main">
  <span></span>
  <div></div>
</div>