Полный компонент центрирования

Я хотел бы знать, есть ли компонент, который позволяет мне центрировать по вертикали / горизонтали все, что я хочу, без написания собственного CSS?

Я пробовал реагировать-центр и реагировать-flexbox-grid, но безуспешно. Было бы неплохо, если бы был какой-то компонент, который позволяет мне установить, как я хочу выровнять горизонтальные и вертикальные свойства желоба.

РЕДАКТИРОВАТЬ:

Вот код, который у меня есть:

    import React from 'react';
import {InputGroup, InputGroupAddon, Input, Button} from 'reactstrap';
import {Row, Col} from 'react-flexbox-grid';
import FlexView from 'react-flexview';

class Login extends React.Component{
    render(){
        return(
            <FlexView hAlignContent='center' vAlignContent='center'>
                <div>
                    {/*Row for username*/}
                    <Row>
                        <Col xs/>

                        <Col xs>
                            <InputGroup id="loginGroup">
                                <InputGroupAddon addonType="prepand">
                                    @
                                </InputGroupAddon>

                                <Input placeholder="username" />
                            </InputGroup>
                        </Col>

                        <Col xs/>
                    </Row>

                    <br/>

                    {/*Row for password*/}
                    <Row>
                        <Col xs="3" sm="3"/>

                        <Col xs="6" sm="6">
                            <InputGroup id="loginGroup">
                                <InputGroupAddon addonType="prepand">
                                    ....
                                </InputGroupAddon>

                                <Input placeholder="password" type="password" />
                            </InputGroup>
                        </Col>

                        <Col xs="3" sm="3"/>
                    </Row>

                    <br/>

                    <Row>
                        <Col xs="3" sm="3"/>

                        <Col className="text-center" xs="6" sm="6">
                            <Button color="primary">Login</Button>
                        </Col>

                        <Col xs="3" sm="3"/>
                    </Row>
                </div>
            </FlexView>
        );
    }
}

export default Login;

Я знаю, что какое бы решение в Интернете я не нашел, оно не работает. Я могу выровнять все по горизонтали без каких-либо проблем, но вертикальное выравнивание является проблемой.

Я даже пытаюсь отреагировать-flexview компонент, но я не могу сделать его в центре с вертикальным выравниванием

Благодарю.

Источник

2 ответа

Я не знаю много о пакете FlexView. Вы можете обойтись без управления, организовав свои стили.

Вот основной пример

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}

main {
  height: 100%;
  display: flex;
  background-color: pink;
  flex-direction: column; /* defined the main axis */
  justify-content: center; /* y-axis */
  align-items: center; /* x-axis */
}

section {
  height: 100px;
  width: 100px;
  background-color: blue;
}
<html>
<body>

  <main>
    <section>
    </section>
  </main>

</body>
</html>

Как вы могли бы реализовать это для React:

// Please see: https://reactjs.org/docs/faq-styling.html
// The parent container that defines the size of the container

const mainContainer = {
  height: 500,
  width: 500,
  display: flex;
  flex-direction: 'column',
  justifyContent: 'center',
  alignItems: 'center',
}

const content = {
  height: 100,
  width: 100,
}

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

return (
  <section style={mainContainer}>
    <article style={content}>

    </article>
  </section>
)
Источник

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

    import React from 'react';
import ReactCenter from 'react-center';
import {Row, Col} from 'react-flexbox-grid';
import Input from '@material-ui/core/Input';
import Button from '@material-ui/core/Button';


class Login extends React.Component{
    render(){
        return(
            <div id="loginForm" style={{height: "100vh", width: "100vw"}}>
                <ReactCenter style={{height: "100vh", width: "100vw"}}>
                        <div style={{height: "200px", width: "300px"}}>
                            <Row>
                                <Col xs="3" sm="3" lg="3"/>

                                <Col xs="6" sm="6" lg="6">
                                    <Input placeholder="username" />
                                </Col>

                                <Col xs="3" sm="3" lg="3"/>
                            </Row>

                            <br/>

                            {/*Row for password*/}
                            <Row>
                                <Col xs="3" sm="3" lg="3"/>

                                <Col xs="6" sm="6" lg="6">
                                    <Input placeholder="password" type="password" />
                                </Col>

                                <Col xs="3" sm="3" lg="3"/>
                            </Row>

                            <br/>

                            <Row>
                                <Col xs="3" sm="3" lg="3"/>

                                <Col xs="6" sm="6" lg="6">
                                    <Button variant="outlined" color="primary">Login</Button>
                                </Col>

                                <Col xs="3" sm="3" lg="3"/>
                            </Row>
                        </div>
                </ReactCenter>
            </div>
        );
    }
}

export default Login;

И, конечно же, я должен был установить style="height: 100vh;" в index.html для основного div.

Источник
Другие вопросы по тегам