Padding-top showing strange behavior

Question

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%?

Just being pedantic here: it's not referred to as "compiling" the HTML code - it's rendering. — NBTX, Apr 16 '17 at 16:25
Also, why is the div's height set to 100%? EDIT: don't worry, misread — NBTX, Apr 16 '17 at 16:26

score 2 · Answer 1 · answered Apr 16 '17 at 16:37

2

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.

answered Apr 16 '17 at 16:37

Andrei Voicu

740
1
6
13

Do you mean that the percentages will always be relative to the width, not the height of the element? – NBTX Apr 16 '17 at 16:40
1

Yes, that is right :P – Andrei Voicu Apr 16 '17 at 16:43

score 1 · Answer 2 · answered Apr 16 '17 at 16:32

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.

score 0 · Answer 3 · answered Apr 16 '17 at 16:30

0

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>

answered Apr 16 '17 at 16:30

Michael Coker

52,626
5
64
64

1

Again, just being pedantic: this will also horizontally centre the element - which the OP has not asked for. In this case, I presume it's what he wants though. – NBTX Apr 16 '17 at 16:33
Thank you, but why doesn't the browser vertically center it when I use *padding-top:50%*? To me it seems like that should work perfectly fine too.. – Jay Weber Apr 16 '17 at 16:34
@SamMearns Yes, you are right, this is what I wanted. – Jay Weber Apr 16 '17 at 16:35
@JoshuaWeber That just pushes the element down by 50% of the document height. It's not moving it by the center of the element but by the top of the element. Do you understand what I mean? – NBTX Apr 16 '17 at 16:36
1

@JoshuaWeber right, like you said in your post, vertical padding is based off of the element's width. So the value for `padding-top: 50%` will be half of the element's width. It's how the box model works. – Michael Coker Apr 16 '17 at 16:37
@SamMearns right, I assumed they wanted horizontal centering, too, per their example. – Michael Coker Apr 16 '17 at 16:38
@JoshuaWeber do you want me to remove the code that horizontally centers this content or is it doing what you want it to? – Michael Coker Apr 16 '17 at 16:38
@MichaelCoker That's good to know for future usage.. and yes, it is doing exactly what I wanted it to do, thank you – Jay Weber Apr 16 '17 at 16:44

Padding-top showing strange behavior

3 Answers3