import { AbsoluteCenter, Box } from "@chakra-ui/react"
const Demo = () => {
return (
<Box position="relative" h="100px" bg="bg.muted" borderRadius="md">
<AbsoluteCenter>
<Box bg="bg.emphasized" px="4" py="2" borderRadius="md" color="fg">
Centered Content
</Box>
</AbsoluteCenter>
</Box>
)
}
用法
¥Usage
AbsoluteCenter 组件使用 position: absolute 策略将其子元素相对于父元素居中。
¥The AbsoluteCenter component uses the position: absolute strategy to center
its child element relative to its parent.
父元素必须具有 position: relative 才能正确定位。
import { AbsoluteCenter } from "@chakra-ui/react"<Box position="relative" h="100px">
<AbsoluteCenter>Centered Content</AbsoluteCenter>
</Box>示例
¥Examples
轴控制
¥Axis Control
使用 axis 属性控制以哪个轴为中心。选项为 horizontal、vertical 或 both（默认）。
¥Control which axis to center on using the axis prop. Options are horizontal,
vertical, or both (default).
<AbsoluteCenter axis="horizontal" />
<AbsoluteCenter axis="vertical" />
<AbsoluteCenter axis="both" />
import { AbsoluteCenter, Box, For, Text, VStack } from "@chakra-ui/react"
const Demo = () => {
return (
<VStack gap="6" align="stretch">
<For each={["horizontal", "vertical", "both"]}>
{(axis) => (
<VStack gap="2" key={axis}>
<Text fontWeight="medium">{`<AbsoluteCenter axis="${axis}" />`}</Text>
<Box position="relative" h="80px" outline="1px solid red">
<AbsoluteCenter axis={axis}>
<Box
bg="blue.solid"
px="3"
py="1"
borderRadius="sm"
color="white"
>
{axis}
</Box>
</AbsoluteCenter>
</Box>
</VStack>
)}
</For>
</VStack>
)
}
包含内容
¥With Content
将 AbsoluteCenter 与各种内容类型（例如图标、徽章和状态指示器）一起使用。
¥Use AbsoluteCenter with various content types like icons, badges, and status
indicators.
import { AbsoluteCenter, Box } from "@chakra-ui/react"
import { LuHeart } from "react-icons/lu"
const Demo = () => {
return (
<Box
position="relative"
w="100px"
h="100px"
bg="bg.muted"
borderRadius="md"
>
<AbsoluteCenter>
<Box
bg="red.solid"
color="white"
p="3"
borderRadius="full"
fontSize="xl"
>
<LuHeart />
</Box>
</AbsoluteCenter>
</Box>
)
}
叠加用法
¥Overlay Usage
非常适合创建需要居中显示现有内容的加载叠加层或类似模态框的内容。
¥Perfect for creating loading overlays or modal-like content that needs to be centered over existing content.
Loading...
import { AbsoluteCenter, Box, HStack, Spinner, Text } from "@chakra-ui/react"
const Overlay = () => (
<AbsoluteCenter bg="bg/80" backdropFilter="blur(2px)" rounded="md" p="4">
<HStack gap="3">
<Spinner size="sm" colorPalette="blue" />
<Text fontSize="sm" color="fg.muted">
Loading...
</Text>
</HStack>
</AbsoluteCenter>
)
const Demo = () => {
return (
<Box position="relative" h="120px" bg="bg.muted" rounded="md" p="10">
<Box opacity="0.5" aria-busy="true">
Some content that is being loaded...
</Box>
<Overlay />
</Box>
)
}
RTL 支持
¥RTL Support
AbsoluteCenter 通过调整水平位置和适当的变换自动处理从右到左 (RTL) 布局。
¥AbsoluteCenter automatically handles right-to-left (RTL) layouts by adjusting
the horizontal positioning and transforms appropriately.
RTL (horizontal)
RTL (vertical)
RTL (both)
import {
AbsoluteCenter,
Box,
For,
HStack,
Span,
Text,
VStack,
} from "@chakra-ui/react"
const Demo = () => {
return (
<VStack gap="6" align="stretch">
<For each={["horizontal", "vertical", "both"]}>
{(axis) => (
<VStack gap="2" dir="rtl" key={axis}>
<Text fontWeight="medium">RTL ({axis})</Text>
<Box
position="relative"
h="100px"
bg="bg.muted"
borderRadius="md"
outline="1px solid red"
>
<AbsoluteCenter axis={axis}>
<HStack
bg="green.solid"
color="white"
px="4"
py="2"
borderRadius="md"
gap="2"
>
<Span>البداية</Span>
</HStack>
</AbsoluteCenter>
</Box>
</VStack>
)}
</For>
</VStack>
)
}
属性
¥Props