Question

我的页面中有两个div，这似乎与垂直和水平中心对齐工作正常，但垂直调整浏览器，div没有响应增长或收缩，我假设它因为边缘：auto;但是找不到解决这个问题的方法，你们可以帮忙吗？

CSS如下：

#outer {    
width: 100%;    
height: 417px;  
position:relative;  
background-color:#666; 
}

 #inner {
height: 300px;  
width:50%;  
background-color: #F00;
position:absolute;  
left:0;     
right:0;    
top:0;  
bottom:0;
margin:auto;    
height:240px;   }

JSFiddle

Answer 1

您需要将div高度设置为相对值（百分比）：

html, body, #outer{
  height: 100%;
}

#outer {
  width: 100%;
  position:relative;
}

#inner {
  height: 60%;
  width:50%;
  position:absolute;
  left:0;
  right:0;
  top:0;
  bottom:0;
  margin:auto;
}

Answer 2

margin:auto没问题。问题在于您的固定高度，以及您有两个height属性的事实。您应该将尺寸设置为百分比值。

这是修补的代码：

 #outer {    
width: 100%;    
height: 417px; 
position:relative;  
background-color:#666; 
}
#inner {
height: 50%; // This equals to 50% of 417px, which is height of #outer 
width:50%;  
background-color: #F00;
position:absolute;  
left:0;     
right:0;    
top:0;  
bottom:0;
margin:auto;    
   }

DIV在相对定位的DIV的中心垂直和水平对齐

2 个答案: