垂直居中的div离开背景

Question

我用CSS垂直居中一个div，效果很好。但是我有一个背景，当我调整浏览器的大小时，文字就会变成背景。

.wrapper{ 
    height: 100%; 
    width: 100%;  
    background: rgba(51,51,51,.5); 
} 


.outer { 
    display: table; 
    position: absolute; 
    height: 100%; 
    width: 100%; 
} 

.middle { 
    display: table-cell; 
    vertical-align: middle; 
} 

.inner { 

    margin-left: auto; 
    margin-right: auto; 
    width: 50%; 
} 

jsfiddle

Answer 1

.wrapper是div，所以它已经width: 100%（因为div有display: block，我们知道，所有的块是全宽元素）。​​意味着它将继承其父项的全部高度（在这种情况下，它是body,body继承其父项的高度 - html--因此您获得视域高度）;所以我们可以删除所有.wrapper款式。而简单地添加到background: rgba(51,51,51,.5);.outer

html, 
 
body { 
 
    width: 100%; 
 
    height: 100%; 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 

 
.wrapper { 
 

 
} 
 

 
.outer { 
 
    display: table; 
 
    position: absolute; 
 
    height: 100%; 
 
    width: 100%; 
 
    background: rgba(51,51,51,.5); 
 
} 
 

 
.middle { 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
} 
 

 
.inner { 
 
    margin: 0 auto; 
 
    width: 50%; 
 
}

<div class="wrapper"> 
 
    <div class="outer"> 
 
     <div class="middle"> 
 
      <div class="inner"> 
 
      
 
       <h1>The Content</h1> 
 
       
 
       <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p> 
 
      
 
      </div> 
 
     </div> 
 
    </div> 
 
</div>

Answer 2

试试这个https://jsfiddle.net/serGlazkov/5t9asdc1/3/ 你应该使用min-height和删除此处position: absolute;

.outer { 
    display: table; 
    /*position: absolute;*/ 
    height: 100%; 
    width: 100%; 
} 

Answer 3

Jsfiddle Here

不需要在.outer中使用position:absolute并在.wrapper中指定高度。

.wrapper{ 
/* height:100%; remove this-**/ 
width: 100%;  
background: rgba(51,51,51,.5); 
} 
.outer { 
display: table; 
/* position: absolute; remove this-**/ 
min-height: 100%; 
width: 100%; 
}