我想知道是否有一个组件允许我在没有编写自定义CSS的情况下将任何我想要的垂直/水平居中？
我尝试过react-center和react-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;
我知道，无论我在网上找到什么解决方案，它都无法正常工作。我可以水平对齐中心的所有内容而没有任何问题，但垂直对齐是一个问题。
我甚至尝试使用react-flexview组件，但我不能将其作为垂直对齐的中心。
谢谢。
我对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,
}
render方法可能如下所示：
return (
<section style={mainContainer}>
<article style={content}>
</article>
</section>
)
我已经设法为我想做的事找到了合适的解决方案。我已设法使react-center组件正常工作，这是正在运行的代码：
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;”在主要div的index.html中。