图像不会以父div为中心

Question

我一直在搞乱这个问题，我似乎无法做到这一点。我有一个父div，其宽度和高度设置为100％。我在搜索中查找的所有内容都表示要调用该类，然后调用图像，如下所示：

.hand img

然后将显示设置为块并将边距设置为自动。

这对我不起作用。我把顶部设置为50％，所以它的方面很好，它只是水平，图像不会居中。

我创建的代码段并没有复制我的问题，所以请到这里查看。手是我需要的中心。

有人看到我做错了吗？

enter link description here

＆＃13;

＆＃13;

.blue {
	/*background-color: #ba5a45;*/
	background-color: #0085A1;
	width: 100%;
	height: 600px;
}
.hand {
    width: auto;
    height: auto;
    position: absolute;
	top: 50%;
    -webkit-animation: wave 4s 1 normal forwards;
    animation: wave 4s 1 normal forwards;
}
.hand img {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

＆＃13;

<div class="blue">
<img src="http://optimumwebdesigns.com/images/hand.png" class="hand">
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

请看一下。你做错了

.blue {
	/*background-color: #ba5a45;*/
	background-color: #0085A1;
	width: 100%;
	height: 100vh;
  text-align: center;
}
.hand {
  display: inline-block;
  vertical-align: top;
  text-align: center;
    -webkit-animation: wave 4s 1 normal forwards;
    animation: wave 4s 1 normal forwards;
    position: relative;
    top: 50%;
}

<div class="blue">
<img src="http://optimumwebdesigns.com/images/hand.png" class="hand">
</div>

Answer 2

设定你的手类

.hand {
transform: translate(-50%,-50%);
top: 50%;
left: 50%;
}

这是工作。我添加了图片作为证据

Answer 3

当您使用“.hand img”时，它会检查.hand div中的img标签。在您的情况下，它不正确。

你可以，

img.hand {
   display: block;
   margin-left: auto;
   margin-right: auto;
} 

因为你的img标签的类是手。这对你有用。

Answer 4

尝试将.hand img更改为.blue img或.blue > img

Answer 5

我不太清楚这是否是您想要的，但将max-height和max-width设置为100％会将图像移动到中心。

.blue {
	/*background-color: #ba5a45;*/
	background-color: #0085A1;
	width: 100%;
	height: 600px;
}
.hand {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    position: absolute;
	top: 50%;
    -webkit-animation: wave 4s 1 normal forwards;
    animation: wave 4s 1 normal forwards;
}

<div class="blue">
<img src="http://optimumwebdesigns.com/images/hand.png" class="hand">
</div>

Answer 6

将position: relative;提供给.blue，将left:50%提供给.hand，transform: translate(-50%, -50%);将适合您。

.blue {
	/*background-color: #ba5a45;*/
	background-color: #0085A1;
	width: 100%;
	height: 600px;
  position: relative;
}
.hand {
    -webkit-animation: wave 4s 1 normal forwards;
     animation: 4s ease 0s normal forwards 1 running wave;
    height: auto;
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: auto;
}
.hand img {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

<div class="blue">
<img src="http://optimumwebdesigns.com/images/hand.png" class="hand">
</div>