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

如何将我的图像对准正文或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并使用{ {1}}。

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%);
}

Answer 2

在您的代码中，需要进行一些小改动以获得您的愿望输出。这包括代码margin: 0 auto;以及#main div css。那么css将如下所示。

#main div{
    width: 70px;
    height: 70px;
    align-self: center;
    background:red;
  margin: 0 auto;/*Newly added one*/
}

我已经更新了你的jsfiddle示例。 Click here

Answer 3

我喜欢使用这个漂亮的小变换翻译技巧来集中处理。

在你的情况下

   #main {
    width: 170px;
    height: 300px;
    border: 1px solid #c3c3c3;
    position: relative;
   }

    #main div {
     width: 70px;
     height: 70px;
     position: absolute;
     left: 50%;
     top: 50%;
     transform: translate(-50%, -50%);
     background:red;
    }

因此，在父元素上使用position：relative，在子元素上使用position：absolute。在绝对元素上使用left：50％和top：50％以及transform：translate（-50％， - 50％）并且所有内容都应该居中。

Answer 4

添加“margin：0 auto;”对你的形象这样：

#main div{
    margin: 0 auto;
    }

这里是小提琴：https://jsfiddle.net/px52mk5b/5/

- 我希望这个帮助

如何将框中的图像精确对齐（垂直和水平）

4 个答案: