Zentrieren ist eine der häufigsten Layout-Aufgaben und in React Native ausschließlich über Flexbox-Eigenschaften lösbar – es gibt kein CSS-margin: auto-Äquivalent für einzelne Elemente.

1. Beschreibung

Zwei Achsen, zwei Eigenschaften: justifyContent zentriert entlang der HAUPTACHSE (bei Standard-flexDirection: 'column' also VERTIKAL), alignItems entlang der QUERACHSE (also HORIZONTAL). Beide zusammen auf 'center' zentrieren ein Kind vollständig in beiden Richtungen.

2. Kurzes Beispiel

<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
  <Text>Perfekt zentriert</Text>
</View>

3. Komplettes Projekt: Zentrierungs-Spickzettel

npx create-expo-app centering-demo
cd centering-demo

import { View, Text, StyleSheet } from 'react-native';

function Demo({ titel, style }) {
  return (
    <View style={styles.abschnitt}>
      <Text style={styles.label}>{titel}</Text>
      <View style={[styles.box, style]}>
        <View style={styles.punkt} />
      </View>
    </View>
  );
}

export default function App() {
  return (
    <View style={styles.container}>
      <Demo titel="Nur vertikal (justifyContent)" style={{ justifyContent: 'center' }} />
      <Demo titel="Nur horizontal (alignItems)" style={{ alignItems: 'center' }} />
      <Demo
        titel="Beide Achsen (voll zentriert)"
        style={{ justifyContent: 'center', alignItems: 'center' }}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, paddingTop: 60, paddingHorizontal: 16 },
  abschnitt: { marginBottom: 20 },
  label: { marginBottom: 6, color: '#374151' },
  box: { height: 100, backgroundColor: '#f3f4f6', borderRadius: 8 },
  punkt: { width: 16, height: 16, borderRadius: 8, backgroundColor: '#2563eb' },
});

4. Erklärung

• Erste Box: nur justifyContent: 'center' – der Punkt sitzt vertikal mittig, bleibt aber am LINKEN Rand (kein alignItems gesetzt → Standard 'stretch' bzw. der Punkt startet links).
• Zweite Box: nur alignItems: 'center' – umgekehrtes Bild, horizontal mittig, vertikal oben.
• Dritte Box: BEIDE gesetzt – der Punkt sitzt exakt in der Mitte in beiden Richtungen.
• Ein einzelnes Kind zentrieren ist der Sonderfall flex: 1 auf dem GESAMTEN Bildschirm bzw. Container – für die Zentrierung MEHRERER Geschwister-Elemente zueinander sind zusätzlich flexDirection und ggf. gap relevant.

5. Ausgaben