Padding-top showing strange behavior [duplicate] - html

Question

This question already has answers here:
How can I vertically center a div element for all browsers using CSS?
(48 answers)
Closed 5 years ago.
I have the following HTML code:
p.error {
color: red;
padding: 5%;
margin-left: 20%;
margin-right: 20%;
font-size: 300%;
height: 100%;
box-shadow: 3px 3px 20px 3px #545454;
text-align: center;
background-color: #f1f1f1;
}
div.alert {
padding-top: 50%;
}
<div class="alert">
<p class="error">Error: Permission denied!</p>
</div>
Which my browser (Google Chrome Version 57.0.2987.133) compiles to this:
I finally got it to vertically center the div by using:
div.alert{
padding-top: 22.5%;
}
By further testing, I noticed that the browser uses the width instead of the height for padding-top.
My question: Why does the browser compile the HTML-code like this and how can I get it to vertically center the div by using 50%?

Answer 1

Padding-top percent is referring to the width of the element. It is part of the W3 CSS Box model specifications:
http://www.w3.org/TR/CSS2/box.html#padding-properties
You will not be able to reference height with padding percentages. It will always refer to width.

Answer 2

For centering, I'd recommend you refer to this CSS-Tricks article:
https://css-tricks.com/centering-css-complete-guide/
I have used this, however I have skipped out the parent element part because the parent is the body:
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
.alert {
position: absolute;
top: 50%;
transform: translateY(-50%);
/* for Safari */
-webkit-transform: translateY(-50%);
}
p.error{
color: red;
padding: 5%;
margin-left: 20%;
margin-right: 20%;
font-size: 300%;
box-shadow: 3px 3px 20px 3px #545454;
text-align: center;
background-color: #f1f1f1;
height: 100%;
}
<div class="alert">
<p class="error">Error: Permission denied!</p>
</div>
NOTE: I have only vertically centered the element, not horizontally too.

Answer 3

To vertically center, you want to use an absolute position with top: 50%; left: 50%; transform: translate(-50%,-50%); to put it in the dead center.
p.error {
color: red;
padding: 5%;
margin-left: 20%;
margin-right: 20%;
font-size: 300%;
height: 100%;
box-shadow: 3px 3px 20px 3px #545454;
text-align: center;
background-color: #f1f1f1;
}
div.alert {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
}
<div class="alert">
<p class="error">Error: Permission denied!</p>
</div>
You can also use display: flex; justify-content: center; align-items: center; on the parent to center a child in the dead center.
body {
margin: 0;
}
p.error {
color: red;
padding: 5%;
margin-left: 20%;
margin-right: 20%;
font-size: 300%;
height: 100%;
box-shadow: 3px 3px 20px 3px #545454;
text-align: center;
background-color: #f1f1f1;
}
div.alert {
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
<div class="alert">
<p class="error">Error: Permission denied!</p>
</div>