如何垂直居中元素答案

【问题标题】：How to center elements vertically如何垂直居中元素
【发布时间】：2020-06-23 06:50:35
【问题描述】：

所以我有一个组件需要显示带有标题、一些文本和一个按钮的背景图像。但是，所有元素似乎都在我的导航栏下方的页面中开始。我似乎无法将它们放到 div 的中间。我尝试将 margin-top 设置为“主”div，这确实会降低元素，但也会在组件之间留下巨大的空白。

主要部分

return (
    <div className="main">
      <div className="container">
        <h1 className="main-heading">LOREM IPSUM</h1>
        <p>LOREM IPSUM SOME TEXT</p>
        <button>READ MORE</button>
      </div>
    </div>
  );

主要 CSS：

.main {
  background-image: url("../../images/pharmacy.jpg");
  background-size: cover;
  z-index: -1;
  top: 10px;
  width: 100%;
  height: 600px;
  margin-top: 3rem;
}

.container {
  text-align: center;
  vertical-align: middle;
}
.main-heading {
  display: inline-block;
}

我还尝试在 App.js 中设置组件的样式，顶部边距如下：

      <main style={{ marginTop: "700px" }}>
        <MainSection />
      </main>

但它不起作用。文字基本上在上面的组件下面。

编辑：我附上了一张图片来显示正在发生的事情。我对样式有点了解，并尝试过使用 flexbox 进行常规操作。我不确定为什么它们会卡在顶部组件下方！

【问题讨论】：

使用 CSS flexbox 并将其容器中心的内容与justify-content 和align-items 对齐

标签： html css reactjs

【解决方案1】：

您应该使用 flexbox 将您的内容垂直居中，这里是 example on Stackblitz，这里是代码：

.js :import React, { Component } from "react";
import { render } from "react-dom";
import "./style.css";

const App = () => {
  return (
    <div className="container">
    Start editing to see some magic happen :)
    </div>
  );
};

render(<App />, document.getElementById("root"));

.css：

.container {
  height: 600px;
  display: flex;
  align-items: center;
  justify-content: center
}

【讨论】：