After aligning a div horizontally and vertically center - html

Question

I saw a lot of question How to align a div horizontally and vertically center and i got a answer also.
The code which i got:
Html-
<div class="outer">
<div class="middle">
<div class="inner">
<div align="center">
<h1>The Content</h1>
<p>Once upon a midnight dreary...</p>
</div>
</div>
</div>
</div>
Css-
.outer {
display: table;
position: absolute;
height: 100%;
width: 100%;
}
.middle {
display: table-cell;
vertical-align: middle;
}
.inner {
margin-left: auto;
margin-right: auto;
background: blue; /*gave blue to know the height and width*/
}
And i got it correctly.
But i am not able to give a default height to it.
When i give width: 50%; and height: 50%; to class="inner" only the width is being accepted.
I am not even able to give padding space between top and bottom. Please help.
Please don't give me another code to align a div vertically and horizontally center

Answer 1

What (I think) you want, is this :
body {
margin : 0;
}
.outer {
display: table;
position: absolute;
height: 100%;
width: 100%;
}
.middle {
display: table-cell;
vertical-align: middle;
text-align: center;
}
.inner {
display: inline-block;
width: 50%;
height: 50%;
background: blue;
}
<div class="outer">
<div class="middle">
<div class="inner">
<h1>The Content</h1>
<p>Once upon a midnight dreary...</p>
</div>
</div>
</div>
See also this Fiddle!

Answer 2

You are not assigning height: 50% in the right place.
The 50% is taking half of inner div. What you need to do is to assign for the div inside of class 'inner'.
You can try flex box.
Add this code:
.inner {
margin-left: auto;
margin-right: auto;
background: blue;
height: 50%;
width:50%;
display: flex;
flex-direction: column;
justify-content: center;
}
Check it out at https://jsfiddle.net/ke5z9ukh/1/