Html 如何将div中的元素对齐到"；块；水平和垂直？

我在一个div中有3个元素，我希望它们位于一个块（垂直）中，并且水平和垂直对齐。下面是它现在的样子：

这是我的密码：

<div className="parent">
        <p className="heading">TITLE</p>
        <p className="description"><strong>DISCLAIMER</strong>: The site contains offensive, vulgar langauge which may not be<br/>suitable for many, so enter with caution and do not reveal any personal details</p>
        <Link to="/school"><button className="enterButton">enter the website</button></Link>
    </div>

----------------------
stylesheet.css
----------------------
.parent {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .heading {
    font-size: 76px;
    text-align: center;
  }

  .description {
    font-size: 18px;
    opacity: .7;
    text-align: center;
    line-height: 26px;
  }

  .enterButton {
      width: 360px;
      height: 100px;
      background-color: #E1E8ED;
      color: #15202B;
      font-size: 32px;
      font-weight: bolder;
      text-align: center;
      border: none
  }

---

“Flex direction”列，用于设置Flex父元素中元素的对齐方式。您已经使用

align items:center

和

justify content:center

将两个轴的中心对齐

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

---

将完成此操作…

.parent

需要，

弹性方向：列@dalelandry我现在无法描述幸福，伙计，在这个琐碎的问题上度过了两个不眠之夜！谢谢！！是的，这很有效嘿，如果我添加
flex-direction:column
，代码可以正常工作，但我的网站中还有其他页面受到它的影响。例如，其中一个页面是一个
显示：网格
，水平展开，但突然之间它们是垂直的，并且在彼此下方。我能做些什么吗？听起来你有多个页面使用相同的
.parent
类，更改特定的选择器会导致其他页面出现问题。为
.parent
元素创建一个唯一的类，该元素包含该页面所需的flex代码，并将其添加到该元素和CSS页面中！谢谢！
.parent {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }