How to place a button in the middle of the page using HTML and CSS

Question

I would like to place a button in the middle of my page. What is the best way to center this button properly? steps by steps, please.

<button type="button">Welcome</button> 

How can i center this to fit perfectly in the middle of my page? using the margins in CSS?

Thanks!

Answer 1

To centralize horizontally -Without using flexbox

See this fiddle

HTML

<button type="button">Welcome</button>

To make the button centralized, use the following CSS

button{
    display: block;
    margin:0 auto;
}

To centralize horizontally and vertically -using flexbox

See this fiddle

CSS

body, html {
    height: 100%;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    align-items: center;
    justify-content: center;
}
button{
    display: flex;
    margin:0 auto;
    align-items:center;
}

Answer 2

To center both vertically and horizontally using margins and positioning, you can do it like this:

button {
  height: 50px;
  width: 100px;
  position: absolute;
  margin: -25px 0 0 -50px; //half height and half width
  left: 50%;
  top: 50%;
}