Full centering component

Question

Full centering component

9.9k views Asked by Ryukote At 24 November 2024 at 21:17

I would like to know if there is a component that allows me to center vertical/horizontal anything I want without writing custom CSS?

I have tried react-center and react-flexbox-grid but without any success. It would be nice if there is some component that allows me to set how I want to align both horizontal and vertical trough properties.

EDIT:

This is the code I have:

    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;

I know, that whatever solution on the web I found, it is not working. I can horizontal align everything in the center without any problems, but vertical alignment is a problem.

I am even trying react-flexview component but I can't make it center with vertical alignment.

Thanks.

Original Q&A

There are 2 answers

**Dan** · Answer 1 · 2018-06-16 02:00:55

I don't know much about FlexView package. You can go without by managing how you organize your styles.

Here is a basic example

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>

How you might implement this for 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,
}

The render method may look like this:

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

    </article>
  </section>
)

**Ryukote** · Answer 2 · 2018-06-16 15:57:22

I have managed to find proper solution for what I want to do. I have managed to make react-center component work properly and this is the code that is working:

    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;

And ofc, I had to place style="height: 100vh;" in the index.html for the main div.

TechQA.

Full centering component

There are 2 answers

Related Questions in REACTJS

Related Questions in REACT-FLEXBOX-GRID

Popular Questions

Popular Tags

Trending Questions