时间戳

首页 > 解决方案 > 如何垂直居中元素

html - 如何垂直居中元素

问题描述

所以我有一个组件需要显示一个带有标题、一些文本和一个按钮的背景图像。但是，所有元素似乎都在我的导航栏下方的页面中开始。我似乎无法将它们放到 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 中使用 margin top 设置组件的样式，如下所示：

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

但它不起作用。文本基本上位于上面的组件下方。

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

在此处输入图像描述

标签： htmlcssreactjs

解决方案

您应该使用 flexbox 将您的内容垂直居中，这是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
}

推荐阅读