我无法将这个div居中，我不知道为什么[重复]

Question

我正在尝试为按钮设置动画以更改单击时某些文本的颜色，并且我正在尝试将其居中于页面中间，我正在使用 flex 属性，但似乎不起作用。我想显示在页面的正中间，垂直和水平都可以，但是显示在左上角

.boton {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  background-color: cornflowerblue;
  border-radius: 5px;
  height: 150px;
  width: 300px;
}

<div class="boton"></div>

Answer 1

您必须将其父级设置为

flexbox

并向其添加

justify-content: center

和

align-items: center

。

body {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

.boton {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  background-color: cornflowerblue;
  border-radius: 5px;
  height: 150px;
  width: 300px;
}

<div class="boton"></div>