Расположите элемент в вертикальном центре экрана в приложении React

Question

У меня есть приложение ReactJS, и я действительно изо всех сил пытаюсь заставить компонент появляться в центре экрана.

Мой метод рендеринга выглядит так:

 render () {
    return (           
        <div>
          <MyComponent />

        </div>
    );
  }

Я видел здесь несколько вопросов и сообщений в блоге, которые касаются этого, но по тем или иным причинам ни один из них не работает для меня.

Самое распространенное предположение, что я ' мы видели, что нужно делать такие вещи:

<div style={{
  display: "flex",
  justifyContent: "center",
  alignItems: "center"          
}}>
    <MyComponent />
</div>

Наряду с установкой высоты на 100%. Во-первых, выполнение этого, кажется, разрезает элемент управления пополам по горизонтали (то есть он разбивает содержимое и даже обрезает один из дочерних элементов управления в крайнем правом углу). Кроме того, он не помещает элемент управления в вертикальный центр.

Очевидно, что я что-то упускаю в свойствах CSS здесь - может кто-нибудь указать мне правильное направление, пожалуйста?

Возможно, стоит упомянуть, что, хотя я использую React, я использую его с Asp. Net Core.

EDIT

Код компонента здесь:

function MyComponent(props) {

    return (        
        <div className="form-group row">

            <label htmlFor="myData" className="col-sm-2 col-form-label">Enter Data</label>
            <div className="col-sm-8">
                <input id="myData" className="form-control" type='text' />
            </div>
            <div className="col-sm-2">
                <ButtonComponent />            
            </div>
        </div>        
    );
}
export default MyComponent;

Answer 1

Ваша обертка должна занимать всю высоту экрана, которая сейчас не происходит. Если у вас все в порядке, ссылаясь на порт просмотра, вы можете использовать следующее:

<div style={{
  display: "flex",
  justifyContent: "center",
  alignItems: "center",
  height: '100vh'          
}}>
    <MyComponent />
</div>

В зависимости от вашего приложения, вы также можете добиться этого, используя относительную оболочку и установив свой элемент как абсолютный,