Question

然而，我无法将图像放在特定div中心。我遇到的答案只是水平居中，而不是垂直居中

＆＃13;

#wrap { 
width: auto; 
margin: 0 auto; 
overflow: hidden;
float: left;
}
/*header info if needed
#headerBlock { 
height: 200px; 
background:  #776b68; 
display: flex;
align-items: center;
}

div.headerText {
display: inline-block;
padding-right: 90px;
}

div.headerImg {
display: inline-block;
}
*/ 

#leftBlock { 
width: 50%; 
height: 500px; 
background: #000; 
float: left; 
}

#leftBlock img {
display: block;
margin: auto;
transition: transform 4s;
}

#leftBlock img:hover {
transform: scale(1.8);
}

#rightBlock { 
width: 50%; 
height: 500px; 
background: #8ab78f; 
float: left; 
}

#rightBlock img {
display: block;
margin: auto;
}

/*ignore footer*/
#footerBlock { 
height: 200px; 
background:  #29342a ; 
clear: left; 
}

＆＃13;

<div id="wrap">
<div id="headerBlock">
    <div class="headerText">blah blah blah so neat</div>
    <div class="headerImg"><img src="/yupyup.jpg" height="70" width="70">
    </div>
</div>

<div id="leftBlock">
    <img src="/leftside.jpg" height="250" width="250">
</div>

<div id="rightBlock"></div>
     <img src="/rightside.jpg" height="250" width="250">
<div id="footerBlock"></div>

</div>

＆＃13;

我遇到的问题是，它只喜欢水平居中。我找到的唯一解决方案是在下面进行以下操作，但所有他们真正做的就是将它移动到整个屏幕上，我必须确定它的位置（应该在leftBlock div内部）...：

#leftBlock img {
position: absolute;
top: 50%;
margin-top: 305px;
left: 50%;
margin-left: -450px;
transition: transform 4s;
}

Answer 1

如果我了解最终目标，您希望将position: relative添加到父级，请删除图片上的边距，并使用transform: translate(-50%,-50%)与top: 50%; left: 50%结合使图像相对于父节点。

#wrap {
  width: auto;
  margin: 0 auto;
  overflow: hidden;
  float: left;
}


/*header info if needed
#headerBlock { 
height: 200px; 
background:  #776b68; 
display: flex;
align-items: center;
}

div.headerText {
display: inline-block;
padding-right: 90px;
}

div.headerImg {
display: inline-block;
}
*/

#leftBlock {
  width: 50%;
  height: 500px;
  background: #000;
  float: left;
}

#leftBlock img {
  display: block;
  margin: auto;
  transition: transform 4s;
}

#leftBlock img:hover {
  transform: translate(-50%,-50%) scale(1.8);
}

#rightBlock {
  width: 50%;
  height: 500px;
  background: #8ab78f;
  float: left;
}

#rightBlock img {
  display: block;
  margin: auto;
}


/*ignore footer*/

#footerBlock {
  height: 200px;
  background: #29342a;
  clear: left;
}

#leftBlock {
  position: relative;
}

#leftBlock img {
  position: absolute;
  top: 50%;
  left: 50%;
  transition: transform 4s;
  transform: translate(-50%, -50%);
}

<div id="wrap">
<div id="headerBlock">
    <div class="headerText">blah blah blah so neat</div>
    <div class="headerImg"><img src="/yupyup.jpg" height="70" width="70">
    </div>
</div>

<div id="leftBlock">
    <img src="/leftside.jpg" height="250" width="250">
</div>

<div id="rightBlock"></div>
     <img src="/rightside.jpg" height="250" width="250">
<div id="footerBlock"></div>

</div>

Answer 2

您好，我有一个简单的解决方案！让你的身体和html高度100％。还要为要使其垂直居中的相关div添加高度，并使用下面的代码。经过验证。

body,html{ height:100%; margin:0px; padding:0px;}

.display-table-container {
  display: table;
	height: 100%;
	margin: 0px auto
}

.display-cell-container {
	display: table-cell;
	vertical-align: middle;
	position: relative
}

<div class="display-table-container">

<div class="display-cell-container">Insert your image here</div>

</div>

Answer 3

这是我放在一起的一个快速示例，我希望能帮到你：

<!DOCTYPE html>
<html>

<head></head>

<body>
  <div style="height: 500px; width: 500px; background: yellow;">
    <div style="background: black; height: 200px; width: 
       200px;position: relative;top: 50%; left: 50%;transform: 
       translate(-50%,-50%);">
       this is a div yo
    </div>
  </div>
</body>

</html>

所以基本上只需要position: relative;top: 50%; left: 50%;transform:translate(-50%,-50%);"关于你想要集中在哪里

无法在div中以中心方式获取图片

3 个答案: