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:
Edit .content class to have following css and remove position absolute
height:auto;
overflow:visible;
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With