Javascript ReactJS + React Router：如何将 div 居中？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/42125775/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
ReactJS + React Router: How to center div?
提问by Jo Ko
I currently have a ReactJS + React Router project set up and in Chrome dev tool under elements shows:
我目前设置了一个 ReactJS + React Router 项目，并且在 Chrome 开发工具下的元素显示：
<body>
<div class="wrapper">
<div data-reactroot>
<div>
<div class="container">Center Me</div>
</div>
</div>
</div>
</body>
with styling and none for class="wrapper":
带样式，无用于class="wrapper"：
.container {
height: 100%;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
Yet the <div class="container">Center Me</div>is staying at the top and centered horizontally but not vertically.
然而，<div class="container">Center Me</div>它停留在顶部并水平居中而不是垂直居中。
I checked the size of that div and it is extremely short but takes up full width of the browser page.
我检查了那个 div 的大小，它非常短，但占据了浏览器页面的整个宽度。
What could I be doing wrong? How can I center <div class="container">Center Me</div>? I even tried to set 100% for width and heighton a higher level, but still does not work.
我可能做错了什么？我怎样才能居中<div class="container">Center Me</div>？我什至试图设置100% for width and height更高的级别，但仍然不起作用。
回答by Tr?ng Nguy?n C?ng
Just:
只是：
<div style={{display: 'flex', justifyContent:'center', alignItems:'center', height: '100vh'}}>
<h1> I am centered </h1>
</div>
or css:
或CSS：
.centered {
height: 100vh; /* Magic here */
display: flex;
justify-content: center;
align-items: center;
}<div class="centered">
<h1> I am centered </h1>
</div>回答by Derrick
Yes, for react,
是的，为了反应，
for becomes htmlFor, and class becomes className etc.
for 变成 htmlFor，而 class 变成 className 等等。
see full list of how HTML attributes are changed here:
在此处查看 HTML 属性如何更改的完整列表：
回答by Win
Here's a code example that basically recreates your page but without react. Hope this helps and shoot away if you have any questions.
这是一个代码示例，它基本上重新创建了您的页面，但没有反应。希望这会有所帮助，如果您有任何疑问，请立即离开。
html, body{
width: 100%;
height: 100%;
}
.wrapper{
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.container {
height: 300px;
width: 300px;
background: black;
color: white;
display: flex;
align-items: center;
justify-content: center;
}<html>
<body>
<div class="wrapper">
<div data-reactroot>
<div class="container">
<div>
<!-- Anything below this line will be centered -->
<div>Hello World!</div>
<div>Center Me</div>
<!-- Anything above this line will be centered -->
</div>
</div>
</div>
</div>
</body>
<html>回答by Blasanka
I just wrap my divwith Gridand added justify="center" attr.:
我只是将我的包裹div起来Grid并添加了justify="center" attr.：
<Grid container spacing={2} justify="center"></Grid>
回答by matthew
In React You need to use className not class. className="wrapper
在 React 中，您需要使用 className 而不是 class。 className="wrapper
