Div height doesn't adjust to fit content
center, css, height, vertical-alignment
Solution
Edit .content class to have following css and remove position absolute
height:auto;
overflow:visible;
Problem
How can I center a div horizontally and vertically and adjust height to fit content? fiddle Here is my html code: ``` <div class="sprite"> </div> <div class="content"> <span>close</span> <div class="centered"> lorem lipsum..... </div> </div> ``` And css: ``` .sprite{ position: fixed; left: 0px; top: 0px; z-index: 20; width: 100%; height: 100%; background-color: gray; opacity: 0.6; } .content{ border:1px solid red; z-index:21; position: absolute; margin:auto; padding:10px; left: 0px; top: 0px; bottom:0px; right:0px; height:30%; width:30%; text-align:center; } .content span{ position:absolute; top:0px; right:0px;} .centered{ height:100%; /* Internet Explorer 10 */ display:-ms-flexbox; -ms-flex-pack:center; -ms-flex-align:center; /* Firefox */ display:-moz-box; -moz-box-pack:center; -moz-box-align:center; /* Safari, Opera, and Chrome */ display:-webkit-box; -webkit-box-pack:center; -webkit-box-align:center; /* W3C */ display:box; box-pack:center; box-align:center; } ``` This is what I want: