html - 为什么此 css 代码不会将页面上的两个元素居中？

Question

我想在我的页面上居中显示内容。我的页面上有一个按钮和一段文字。

我是 css 的新手，所以我不知道应该尝试什么。

body {
  margin: 0 auto;
}

button {
  top: 921px;
  left: 400px;
  width: 180px;
  height: 60px;
  background: #ff9b52 0% 0% no-repeat padding-box;
  border-radius: 30px;
  opacity: 1;
}

p.text {
  top: 2639px;
  left: 1014px;
  width: 398px;
  height: 88px;
  text-align: left;
  font: Regular 20px/27px Segoe UI;
  letter-spacing: 0;
  color: #39316c;
  opacity: 1;
}

<button>Click Me</button>

<p class="text">
  Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quis
  necessitatibus sed officiis repellat illo ratione libero recusandae
  tempora dolorum excepturi. Velit odio mollitia nam vel, nulla nostrum
  officiis exercitationem esse!
</p>

Answer 1

您可以使用display: flex;

body,
html {
  height: 100%;
}

.container {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

p {
  text-align: center;
}

button {
  width: 180px;
  height: 60px;
  background: #ff9b52 0% 0% no-repeat padding-box;
  border-radius: 30px;
  opacity: 1;
}

<div class="container">
  <button>Click Me</button>
  <p class="text">
    Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quis necessitatibus sed officiis repellat illo ratione libero recusandae tempora dolorum excepturi. Velit odio mollitia nam vel, nulla nostrum officiis exercitationem esse!
  </p>
</div>