如何水平和垂直对齐“块”中的 div 元素？ [复制]答案

【问题标题】：How do I align elements of a div in a "block" horizontally and vertically? [duplicate]如何水平和垂直对齐“块”中的 div 元素？ [复制]
【发布时间】：2021-07-30 06:59:04
【问题描述】：

我在一个 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
  }

我希望它们对齐并在彼此下方，例如：

TITLE
Disclaimer
Enter the website

【问题讨论】：

.parent 需要，flex-direction: column;
@dalelandry 我无法形容现在的幸福，伙计，在这个微不足道的问题上度过了两个不眠之夜！非常感谢！！

标签： html css reactjs alignment vertical-alignment

【解决方案1】：

Flex-direction 列设置元素在 flex 父元素中的对齐方式。您已经将两个轴与align-items: center 和justify-content: center 对齐。

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

会成功的......

【讨论】：

是的，这行得通
嘿，如果我添加 flex-direction: column 代码可以正常工作，但我的网站中有其他页面受到它的影响。例如，其中一页是display: grid，水平展开，但突然它们垂直并在彼此下方。有什么我可以做的吗？
听起来您有多个页面使用相同的.parent 类，并且更改该特定选择器会导致其他页面出现问题。为 .parent 元素创建一个唯一的类，该元素具有该页面所需的弹性代码，并将其添加到该元素和您的 CSS 页面。
有效！非常感谢！