Check out example codes for "css div vertical center". It will help you in understanding the concepts better.

Code Example 1

<!DOCTYPE html>
      <style type="text/css">
         width: 200px;
         height: 200px;
         border: solid green;
         display: table-cell;
         vertical-align: middle;
      <div>Vertikal ausgerichteter Text</div>

Code Example 2


  margin: auto;

width: 50%;

border: 3px solid green;
  padding: 10px;


Code Example 3

.container { 
  height: 200px;
  border: 3px solid green; 

.center {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  translate(-50%, -50%);
  transform: translate(-50%, -50%);

  <div class="center">
  <p>I am vertically and horizontally centered.</p>

Learn ReactJs, React Native from