How to Vertically and Horizontally Center a Component in React

How to vertically and horizontally center a component in react?

Your example code works well:

ReactDOM.render(
  <div
    style={{
        position: 'absolute', left: '50%', top: '50%',
        transform: 'translate(-50%, -50%)'
    }}
    >
    Hello, world!
  </div>,
  document.getElementById('root')
);

https://codepen.io/anon/pen/JaLLmX

It has to do something with your layout.

Center align component (both vertical and horizontal) in React

change CSS & add height

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

https://jsfiddle.net/132y89rc/

How to Center React Component Horizontally and Vertically Using Inline Styles

To center vertically you'll have to set the Container inline style to the following:

{
height: '100vh',
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'center',
}

This being done you can probably remove all the other styling.

How to put content center vertically and horizontally with tailwind.css in React, Next.js?

To center all children horizontally you could add place-items-center on your top most <div>, then to center the SVG within its parent container simply apply flex and place-content-center to the container.

<div className="w-screen flex flex-wrap flex-row place-items-center">
    <!-- -->
    <div className="flex place-content-center w-2/12 border-4 h-full"><!-- SVG container -->
        <!-- -->
    </div>
    <!-- -->
</div>

In reactjs, how do I distribute components horizontally across an encompassing div?

You can try to remove position: absolute in Square class:

.Square {
  width: 70px;
  height: 70px;
  border-color: #99ccff;
  text-align: center;
  font-size: xx-large;
  font-family: 'Courier New', Courier, monospace;
}

How to horizontally center a component while there are other components in the same row?

I will make use of Flex here.
Please note that i used borderWidth in the below example only for reference to show how it looks.

I will have flexDirection as row and i will give a flex: 1 to all the views inside

App.js

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

class App extends Component{
  render(){
    return(
      <View>
        <View style={styles.navBar}>
          <View style={styles.itemStyle}>
            <Text style={{fontSize: 18, color: 'blue'}}>Resumes</Text>
          </View>
          <View style={styles.itemStyle}>
            <Text style={{fontSize: 20, color: 'blue'}}>Settings</Text>
          </View>
          <View style={styles.itemStyle}></View>
        </View>

      </View>
    )
  }
}

const styles = {
  navBar: {
    marginTop: 42,
    height: 36,
    flexDirection: 'row',
    alignItems: 'center'
  },
  itemStyle: {
    flex: 1,
    height: 36,
    alignItems: 'center',
    justifyContent: 'center',
    borderWidth: 1
  }
}

export default App;

You can play around in the inside views. Move the buttonBack inside one of the child views.

React Native: Vertically and Horizontally align image and text in same row

You can check here live dmeo here expo-snack:

Also the code is pretty ismple :

import * as React from 'react';
import { Text, View, StyleSheet,Image } from 'react-native';





export default class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Text>Hey</Text>
        <Image source={{uri:'https://source.unsplash.com/random'}} style={{height:50,width:50}}/>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'space-between',
    backgroundColor: '#ecf0f1',
    padding: 8,
    flexDirection:'row',
    alignItems:'center'


  }
});

hope it helps. feel free for doubts , and if you want the text and image to be not so distant you can have justifyContent: 'center',

---

Related Topics