I've been trying to center this button inside the red box but only the padding-top is working. Why?

Question

https://code.sololearn.com/WQ

Answer 1

don't use padding , use position instead , like this :

https://code.sololearn.com/W5cjtkYwv0w7/?ref=app

*padding will make the box more bigger .

Answer 2

Because you apply the padding to an invisible "spacer" element in your code:

<div class="box"><div class="but"></div><button>Gifted</button><div></div></div>

The 'box' <div> contains one 'but' <div> and on <button> which share the same parent ('box') but are parent each of other... to better see what's happened, add some background color to the 'but' css rules (and even some text content inside element):

#but {
background:lime;
}

... as 'but' <div> is empty, setting some padding will grow itself according to that, and make an invisible (no more if you give it background ;)) element that move your button down, but not right because <div> is a block element (so keep by default all width available and introduce line break after).

<button> is an inline element, so you can center horizontally it by giving css 'text-align:center;' to its container ('box')...
Vertical centering is a little more tricky... look at this code for checking the available ways to do so:

https://code.sololearn.com/WewcrAlN1m8k/?ref=app

Anyway, you seems to be confused between margin and padding... check this other code to try to better visualize/understand differences between them:

https://code.sololearn.com/W6qLHyeVSHaI/?ref=app