如何在身体中央对齐按钮

Question

我知道我做得对，但是对齐不正确。这是我正在使用的 CSS ，这意味着主体中的每个<div>按钮都应在主体的中间放下。但这不是那样。

body {
    display: flex;
    align-items: center;
    justify-content: center;
}

Answer 1

您必须为按钮display:block;使用此属性。

html,body,#my-body{
  width:100%;
  height:100%;
  margin:0;
  padding:0;
}
#my-body{
  display:flex;
  justify-content:center;
  align-items:center;
  background:red;
}
button{
  display:block
}

<div id="my-body">
  <button>Button</button>
</div>

Answer 2

添加min-height:100vh;

body {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height:100vh;
    margin:0;
  }

<div>Center</div>

Answer 3

您需要添加flex-direction: column才能起作用。