如何将元素垂直居中

Question

所以我有一个组件，需要显示带有标题，一些文本和一个按钮的背景图像。但是，所有元素似乎都在我的导航栏下面的页面中开始。我似乎无法将它们降低到div的中间。我尝试在'main'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的常规样式。我不确定为什么它们会卡在顶部组件下面！

Answer 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
}