例子：將兩個(gè)<span>元素在<div>內(nèi)垂直居中放置.

方法一：使用 Flexbox 來(lái)實(shí)現(xiàn)。

在下面的示例中，我將為 <div> 元素添加樣式，使其成為一個(gè) Flex 容器，并使用 Flexbox 屬性將其中的兩個(gè) <span> 元素垂直居中：

import React from 'react';
import './Component.css'; // 導(dǎo)入樣式文件function Component() {return (<div className="container"><span className="centered">Span 1</span><span className="centered">Span 2</span></div>);
}export default Component;

在上述代碼中，我們?yōu)?

然后，在樣式文件（例如 Component.css）中，你可以使用 Flexbox 屬性來(lái)實(shí)現(xiàn)垂直居中：

.container {display: flex;flex-direction: column;align-items: center;justify-content: center;height: 300px; /* 為示例添加一個(gè)高度 */
}.centered {/* 可選的樣式定義 */
}

我們通過(guò)將 .container 的 display 屬性設(shè)置為 flex，以及設(shè)置 flex-direction: column;、align-items: center; 和 justify-content: center;，將其內(nèi)部的元素在垂直方向上居中對(duì)齊。

你可以根據(jù)需要對(duì) .centered 類進(jìn)行進(jìn)一步的樣式定義，例如設(shè)置文字樣式、邊距等。

方法二：使用 Grid 實(shí)現(xiàn)上下布局

你可以在容器上應(yīng)用 Grid 布局，并使用網(wǎng)格行來(lái)定位上下兩個(gè)元素。下面是一個(gè)使用 Grid 實(shí)現(xiàn)上下布局的示例：

import React from 'react';
import './Component.css'; // 導(dǎo)入樣式文件function Component() {return (<div className="container"><div className="top">上方內(nèi)容</div><div className="bottom">下方內(nèi)容</div></div>);
}export default Component;

在上述代碼中，我們?cè)?<div> 元素中包含了兩個(gè)子元素，分別是上方內(nèi)容和下方內(nèi)容。

然后，在樣式文件（例如 Component.css）中，你可以使用 Grid 屬性來(lái)實(shí)現(xiàn)上下布局：

.container {display: grid;grid-template-rows: 1fr auto; /* 使用網(wǎng)格行實(shí)現(xiàn)上下布局 */height: 100vh; /* 為示例添加一個(gè)高度，這里使用視口高度作為容器高度 */
}.top {background-color: #f1f1f1;
}.bottom {background-color: #ddd;
}

在上述代碼中，我們將 .container 的 display 屬性設(shè)置為 grid，并使用 grid-template-rows 屬性來(lái)定義網(wǎng)格行。1fr 表示第一行占據(jù)剩余的垂直空間，auto 表示第二行根據(jù)內(nèi)容自動(dòng)調(diào)整高度。

.top 和 .bottom 元素則根據(jù)需要進(jìn)行樣式定義。