React中水平和垂直方向上的组件居中的方法

在本教程中，我们将在实例的帮助下学习如何在React中水平和垂直放置一个组件。

考虑一下，我们的react应用中有以下组件。

import React from 'react';

function Home(){
    return (
        <div className="center">
          <h1>Home Component</h1>
        </div>
    )
}

export default Home;

要在React中使组件水平和垂直居中，请在react组件的CSS类中添加display:flex,justify-content: center 和align-items: center 。

'justify-content: center' 将图片水平居中。

'align-items: center'使图片垂直居中。

这里有一个例子。

import React from 'react';

function Home(){
    return (
        <div className="center">
           <h1>Home Component</h1>
        </div>
    )
}

export default Home;

.center{
    display: flex;
    justify-content: center;
    align-items: center;
}

或者我们可以使用React中的style 对象在线添加它。

import React from 'react';

function Home(){
    return (
        <div style={{
            display: 'flex',
            justifyContent: 'center',
            alignItems: 'center'
        }}>
           <h1>Home Component</h1>
        </div>
    )
}

export default Home;

使用绝对位置定中心

我们可以使用react.js中的绝对定位来使组件在水平和垂直方向上居中。

下面是一个例子。

import React from 'react';

function Home(){
    return (
        <div style={{
               position: 'absolute',
               left: '50%',
               top: '50%',
               transform: 'translate(-50%, -50%)'
        }}>
          Home Component
        </div>
    )
}

export default Home;

1. 在这里，我们将position:absolute 添加到组件的div元素中，因此该元素脱离了正常的文档流程，被定位到其相对的父元素（例如：body或父组件）。

2. left:50% 将该元素从其位置向右移动50%。

3. top:50% 将该元素从其位置上向下移动50%。

4. translate(-50%, -50%) 将该元素向上移动50%，向左移动50%。

创建中心组件

我们也可以在React中创建一个可重复使用的中心组件，所以我们可以在我们的应用程序中重复使用它，而不是每次都在组件中添加样式。

例子。

import React from 'react';

function Center(props){
    return (
        <div style={{
            display: 'flex',
            justifyContent: 'center',
            alignItems: 'center',
        }}>
           {props.children}
        </div>
    )
}

export default Center;

使用中心组件。

import React from 'react';
import Center from './center.js'

function Home(){
    return (
        <div>
           <Center>
             <h1>Home Component</h1>
           </Center>
        </div>
    )
}

export default Home;