To center a button on a web page, you can use the CSS margin: auto; and display: block; properties.

Here is an example of how this can be done:

Copy code<button class="center-button">Center Me</button>

Copy code.center-button {
    display: block;
    margin: auto;
}

This will center the button horizontally in the middle of the page.

To center the button vertically you have to use the position: absolute and top: 50% along with the transform: translateY(-50%)

Copy code.center-button {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

This will position the button in the center of the page both vertically and horizontally.

It’s important to notice that this method will center the button within its parent container, assuming that the parent container has a defined width, and height, and it’s position is set to relative.

You can also use flexbox layout to center the button.

Copy codebody {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
}

This will center the button horizontally and vertically within the body of the page and it will always stay in the center regardless of the screen size.