垂直居中的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%; 
}