如何在没有外部 css 文件的情况下将 div 元素居中

Posted 2023-02-22

【中文标题】如何在没有外部 css 文件的情况下将 div 元素居中

【英文标题】：How do you center a div element in react w/out external css file

【发布时间】：2015-11-23 18:41:37

【问题描述】：

如何在使用外部 css 文件时使 div 元素居中。我尝试使用其他人发布的引导类和内联样式，但这些都不起作用。我想知道你们如何在没有外部 css 文件的情况下实现这一点。

【问题讨论】：

你知道它的宽度吗？如果没有，我认为您可以添加样式position: relative; left:auto; right:auto;

【参考方案1】：

我刚刚添加了：

<Grid container spacing=2 justify="center"></Grid>

【参考方案2】：

偏移：第一个使用 Bootstrap 自己的偏移类，因此它不需要更改标记，也不需要额外的 CSS。关键是设置偏移量等于行剩余大小的一半。因此，例如，大小为 6 的列将通过添加偏移量 3 来居中，即 (12-6)/2。

在标记中，这看起来像：

<div class="row">
    <div class="col-md-6 col-md-offset-3"></div>
</div>

margin-auto：您可以使用margin：0 auto；技术，您只需要注意 Bootstrap 的网格系统添加的浮动。我建议定义一个自定义 CSS 类，如下所示：

.col-centered
    float: none;
    margin: 0 auto;

现在您可以将它添加到任何屏幕大小的任何列大小，并且它将与 Bootstrap 的响应式布局无缝协作：

<div class="row">
    <div class="col-lg-1 col-centered"></div>
</div>

【参考方案3】：

在导入和 React 类之间有这个

const styles = 
  center: 
    marginLeft: "auto",
    marginRight: "auto"
  

然后使用

<div className=styles.center>
  hi
</div>

【参考方案4】：

使用 react-bootrsrap 的一种简单方法是

<Grid>
   <Row className="text-center"><h1>Our Products</h1></Row>
</Grid>

使用 className（而不是 class）来利用 Bootstrap 内置的“text-center”类。

【讨论】：

非常感谢！如果您使用的是 react-bootstrap，则为最佳答案。

【参考方案5】：

我为此使用react-bootstrap：

export default class CenterView extends React.Component 
    render() 
        return (
            <Grid>
                <Row className="show-grid">
                    <Col xs=1 md=4></Col>
                    <Col xs=4 md=4>this.props.children</Col>
                    <Col xs=1 md=4></Col>
                </Row>
            </Grid>
        )
    

然后在代码中

<CenterView>
    <LoginForm/>
</CenterView>

【参考方案6】：

如果你不需要支持旧的浏览器，你可以看看 Flexbox。

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

试试这样的：

<div style=display: 'flex', justifyContent: 'center'>
  <div>centered content</div>
</div>