(React) 问题与 Display flex 居中

Question

我在将 div 居中时遇到了一些问题。我知道，我知道，陈词滥调。我试过使用 AlignItems 和 display flex，但都不起作用。我可以做 left: 20px 并移动它，但我希望它根据他们正在使用的 phone 做出响应。

我正在使用 React，我正在制作霜效果，但如图所示它粘在左侧

这是我使用的代码：

function BottomText() {
  const style = {
    h3: {
      textAlign: "center",
      position: "relative",
      
    },
    p: {
      textAlign: "center",
      position: "relative",
    },
  };

  return (
    <div>
      <h3
        style={{
          textAlign: "center",
          position: "relative",
        }}
      >
        Who We Are
      </h3>
      <p
        style={{
          textAlign: "center",
          position: "relative",
          paddingBottom: "20px",
          borderBottom: ".5px solid white",
        }}
      >
        Kingdom Man Ministry is a Men’s ministry birthed out of our Senior
        Pastor, Mike Kai’s heart to lead men into an authentic Christ-centered
        life. We believe that through the lessons and principles found in Jesus’
        life we can disciple each other to reject passivity, accept
        responsibility, lead courageously and invest eternally.
      </p>

      <h3 style={style.h3}>Our Mission</h3>

      <p style={style.p}>
        The mission of Kingdom Man Ministry is to inspire men to live with
        generational vision; we do that in three steps. Reach Men, Foster
        Discipleship, and Live like Jesus.
      </p>
    </div>
  );
}


const style = {
  frost: {
    position: "relative",
    display: "flex",
    justifyContent: "center",
    backgroundAttachment: "fixed",
    boxShadow: "inset 0 0 2000px rgba(255, 255, 255, .5)",
    backdropFilter: "blur(5px)",
    backgroundColor:"#6c757d4d",
    width: "90%",
    textAlign: "center",
    padding: "10px 10px",
    top: "100px",
    borderRadius: "25px",
  },
};

function About() {
  return (
    <div>
      <TopText />
      <div classname="container" style={style.frost}>
        <BottomText />
      </div>
    </div>
  );

这是我为重现问题而制作的代码笔： Recreated CodePen

这可能是 child div 或其他问题，但我不确定。我觉得这很容易解决，但我已经解决这个问题一段时间了。感谢您的任何评论和快乐的星期天！ :)

Answer 1

您需要创建一个父元素，一个包含 display:flex 和 justify-content:center

的容器

在你的代码笔上；例如试试这个；

<div class="parent" style="display:flex; justify-content:center;">
  <div class="bg">...</div>
</div>

更多信息：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

(React) 问题与 Display flex 居中

(React) Trouble Centering with Display flex

html

css

center

flexbox

reactjs