Why do we need display block to center a button [duplicate] - css

Question

This question already has answers here:
Why centering with margin 0 auto works with display:block but does not work with display:inline-block ?
(5 answers)
Why does margin-top work with inline-block but not with inline?
(3 answers)
Closed 3 years ago.
This may be basic but i read in a book that to center something inside a div you should :
margin-left: auto;
margin-right: auto;
width:70%;
so you give it a width and set auto margin.
With button it will not work and I also need to add this to make it work :
display: block;
Why in this case we need it block ?

Answer 1

inline/inline-block elements can't have auto value for margin.
If you want to center button without making it a block, you can use text-align: center on it's parent.
Also, button don't have to be a block if it's being centered by a flex/grid parent.
I added a few examples below.
.wrapper-center {
padding: 20px;
border: 1px solid blue;
text-align: center;
}
/* ----- */
.wrapper {
padding: 20px;
margin-top: 20px;
border: 1px solid red;
}
.centered-button {
display: block;
margin: 0 auto;
}
/* ----- */
.flex-wrapper {
display: flex;
align-items: center;
justify-content: center;
margin-top: 20px;
padding: 20px;
border: 1px solid green;
}
<div class="wrapper-center">
<button>Test</button>
</div>
<div class="wrapper">
<button class="centered-button">Test</button>
</div>
<div class="flex-wrapper">
<button>Test</button>
</div>

Answer 2

Display: block
This gives the section or div a whole part of the page to itself, starting from what is essentially a new line and taking up the width of the page. Margin and width statement only affect it because of this. Inline or otherwise don’t have this property requirement due to the fact that their properties become relative to other elements on the same line