本机绝对定位水平中心

在使用 position:absolute的情况下，使用 justifyContent或 alignItems似乎不能使元素集中。有一个解决办法使用 marginLeft，但不显示相同的所有设备，甚至使用尺寸来检测设备的高度和宽度。

  bottom: {
position: 'absolute',
justifyContent: 'center',
alignItems: 'center',
top: height*0.93,
marginLeft: width*0.18,
},
bottomNav: {
flexDirection: 'row',
},
181532 次浏览
小开
最佳答案

将所需的子级包装在视图中，并使视图绝对化。 

<View style=\{\{position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, justifyContent: 'center', alignItems: 'center'}}>
<Text>Centered text</Text>
</View>
小开

您可以通过提供设备的宽度除以2并减去您希望居中的宽度的一半来使绝对项居中。

例如，您的样式可能看起来像这样。 

bottom: {
position: 'absolute',
left: (Dimensions.get('window').width / 2) - 25,
top: height*0.93,
}
小开

你可以试试密码 

<View
style=\{\{
alignItems: 'center',
justifyContent: 'center'
}}
>
<View
style=\{\{
position: 'absolute',
margin: 'auto',
width: 50,
height: 50
}}
/>
</View>
小开

如果你想让一个元素本身居中，你可以使用 校准自己:

logoImg: {
position: 'absolute',
alignSelf: 'center',
bottom: '-5%'
}

这是一个示例(注意，标志父级是 职位: 相对视图)

enter image description here

小开

其实很简单，用百分比表示 width和 left的属性，例如:

logo : {
position: 'absolute',
top : 50,
left: '30%',
zIndex: 1,
width: '40%',
height: 150,
}

不管 width是什么，left等于 (100% - width)/2

小开

创建一个全宽 View与 alignItems: "center"，然后插入所需的儿童内。

import React from "react";
import {View} from "react-native";


export default class AbsoluteComponent extends React.Component {
render(){
return(
<View style=\{\{position: "absolute", left: 0, right: 0, alignItems: "center"}}>
{this.props.children}
</View>
)
}
}

您可以为底部对齐的组件添加类似 bottom: 30的属性。

小开 
<View style=\{\{...StyleSheet.absoluteFillObject, justifyContent: 'center', alignItems: 'center'}}>
<Text>CENTERD TEXT</Text>
</View>

再加上这个

import {StyleSheet} from 'react-native';
小开

嗯，我会用这种方式中心绝对意见

  <View style=\{\{ position: 'absolute', left: '50%', marginLeft: -22 }}>
<View style=\{\{ position: 'absolute', width: 44, height: 44}}>
<Ionicons name="close" color="#4775f2" size={32} />
</View>
</View>

注意，在包装图标容器的视图中，我使用的是左边: 50% ，边缘的左边是特殊的，因为你需要恰好放置子元素的中间宽度，然后将其转为负值，在这个例子中是44，如上所示，就是这样


提交答案