trying to align html button at the center of the my page

Edit by author: This is a really out of date answer! Flexbox or grid are much better.

---

I've really taken recently to display: table to give things a fixed size such as to enable margin: 0 auto to work. Has made my life a lot easier. You just need to get past the fact that 'table' display doesn't mean table html.

It's especially useful for responsive design where things just get hairy and crazy 50% left this and -50% that just become unmanageable.

style
{
   display: table;
   margin: 0 auto
}

JsFiddle

In addition if you've got two buttons and you want them the same width you don't even need to know the size of each to get them to be the same width - because the table will magically collapse them for you.

JsFiddle

(this also works if they're inline and you want to center two buttons side to side - try doing that with percentages!).

try this it is quite simple and give you cant make changes to your .css file this should work

<p align="center">
<button type="button" style="background-color:yellow;margin-left:auto;margin-right:auto;display:block;margin-top:22%;margin-bottom:0%"> mybuttonname</button>
</p>

Here's your solution: JsFiddle

Basically, place your button into a div with centred text:

<div class="wrapper">
    <button class="button">Button</button>
</div>

With the following styles:

.wrapper {
    text-align: center;
}

.button {
    position: absolute;
    top: 50%;
}

There are many ways to skin a cat, and this is just one.

You can center a button without using text-align on the parent div by simple using margin:auto; display:block;

For example:

HTML

<div>
  <button>Submit</button>
</div>

CSS

button {
  margin:auto;
  display:block;
}

SEE IT IN ACTION: CodePen