div图像没有垂直和水平居中？答案

【问题标题】：Div Image not centered vertically and horizontally?div图像没有垂直和水平居中？
【发布时间】：2017-08-04 06:26:35
【问题描述】：

无论我尝试什么，我的图像都没有以顶部的标题为中心。如果有人可以为我提供代码更正，将不胜感激。提前致谢。

img {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 675px;
  height: 418px;
  margin-top: -250px;
  /* Half the height */
  margin-left: -250px;
  /* Half the width */
}

body {
  background-color: black;
}

h1 {
  color: white;
  text-align: center;
}

p {
  color: white;
  font-family: verdana;
  font-size: 20px;
}

<h1>Text</h1>
<div class="img">
  <img src="rsz_damon600.png">
</div>

【问题讨论】：

Center a DIV horizontally and vertically的可能重复
没关系，我发现了问题。我应该将边距顶部和左侧更改为宽度和高度的一半。不过谢谢。

标签： html image centering

【解决方案1】：

尝试将left:50% 更改为left:43%。这应该能让你到达你想去的地方。

【讨论】：

【解决方案2】：

试试：

<!DOCTYPE html>
<html>
<head>
<title>HTML Reference</title>
<style>
img {
   display: block;
   margin: 0 auto;
}

body {
    background-color: black;
}

h1 {
    color: white;
    text-align: center;
}

p {
    color : white;
    font-family: verdana;
    font-size: 20px;
}
</style>
</head>
<body>

<h1>Text</h1>
<div class="img">
  <img src="rsz_damon600.png">
</div>

</body>
</html>

【讨论】：

【解决方案3】：

使用css技巧transform: translate(-50%, -50%):

img {
   position: absolute;
   top: 50%;
   left: 50%;
   width: 675px;
   height: 418px;
   transform: translate(-50%, -50%);
}


body {
    background-color: black;
}

h1 {
    color: white;
    text-align: center;
}

p {
    color : white;
    font-family: verdana;
    font-size: 20px;
}

<style>
</style>
<body>

<h1>Text</h1>
<div class="img">
  <img src="http://www.motorverso.com/wp-content/uploads/2015/01/iNFINITI-q60-1_1280x792-675x418.jpg">
</div>

</body>

【讨论】：

【解决方案4】：

您应该将 margin-top 和 margin-left 设置为宽度和高度的一半。

或者如果你不知道元素的大小，你可以使用

变换：翻译(-50%, -50%);

垂直和水平居中

img {
   position: absolute;
   top: 50%;
   left: 50%;
   /* width: 675px;
   height: 418px; */
   transform: translate(-50%, -50%);
}

另一种方法：

img {
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   margin: auto;
}

这是guide

【讨论】：

【解决方案5】：

你可以像这样简单地做到这一点。将图像放在 div 元素中。然后将 div 的边距设置为 auto。 :)

<div name="my_div"style="margin:auto;">
      <img src="" id="" />
</div>

【讨论】：