Компонент Style React отображается в середине столбца сетки semanti c -ui

Question

Я использую semanti c -ui и пытаюсь центрировать мой Animation компонент в середине моего div, поэтому он должен сказать «защитить ваши данные» в середине правого столбца сетки, хотя я очень новичок в мире React / Javascript / Front-end, поэтому не могу понять, как лучше всего это сделать!

Я использую сетку, чтобы обеспечить мобильность приложения, поэтому просто css как left: "70%"; top: "50%" не совсем то, что я ищу. У кого-нибудь есть идеи?

Сделка. js

import React from "react";
import Timer from "./Timer";
import Animation from "./Animation";
import deal from "./Deal.css";

class Deal extends React.Component {
    render() {
        return (
            <div className="ui vertically divided grid">
                <div className="two column row">
                    <div className="column">
                        <h3>DEAL ENDS IN:</h3>
                        <Timer endTime="april 18, 2020 12:00:00" />
                    </div>
                    <div>
                        <Animation />
                    </div>
                </div>
            </div>
        );
    }
}

export default Deal;

Answer 1

Это может помочь.

class App extends React.Component {
 render() {
  return (
  <div class="ui four column grid">
    <div
      class="row"
      style={{
        height: "150px",
        backgroundColor: "bisque"
      }}
    >
      <div
        class="eight wide column"
        style={{
          display: "flex",
          alignItems: "center",
          justifyContent: "center"
        }}
      >
        <div style={{ margin: "0px" }}>
          <h3>DEAL ENDS IN:</h3>
          <div
            style={{
              height: "50px",
              width: "200px",
              backgroundColor: "red"
            }}
          >
            Timer Component
          </div>
        </div>
      </div>
      <div
        class="eight wide column"
        style={{
          display: "flex",
          alignItems: "center",
          justifyContent: "center"
        }}
      >
        <div style={{ margin: "0px" }}>
          <h1>protect your data</h1>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="wide centered column">Animation Component</div>
    </div>
  </div>
  );
 }
}

export default App;

Вы просто должны заменить мое содержимое здесь. Это все о проектировании сетки. Для этого не нужно иметь опыт реакции. Если что-то нужно исправить, оставьте комментарий.