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

Question

我的页面中有两个 div，这似乎在垂直和水平居中对齐时工作正常，但垂直调整浏览器的大小，div 没有通过增长或缩小来响应，我假设它是因为 margin: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;
}