如何使用 HTML 和 CSS 在页面中间放置一个按钮

Question

我想在页面中间放置一个按钮。正确居中此按钮的最佳方法是什么？请一步一步来。

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

我怎样才能使它居中以完全适合我的页面中间？使用 CSS?

中的边距

谢谢！

Answer 1

水平居中-不使用flexbox

看到这个fiddle

HTML

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

要使按钮集中，使用以下CSS

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

水平和垂直居中 - 使用 flexbox

看到这个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

要使用边距和定位在垂直和水平方向居中，您可以这样做：

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