center a div

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

Code Example 1

#inner {
  width: 50%;
  margin: 0 auto;
}

Code Example 2

<div class="" style="width: 90%; background-color: black;margin: auto;">
        <h1>Okay</h1>
    </div>
    
    <!--Add margin: auto to your div or section-->

Code Example 3

<!DOCTYPE html>
<html>
<head>
<style>
.center {
  margin: auto;
  width: 80%;
  border: 3px solid #73AD21;
  padding: 10px; # deals with margins within the element itself
  margin: 20px; # deals with area around outside of element
}
</style>
</head>
<body>

<h2>Center Align Elements</h2>
<p>To horizontally center a block element (like div), use margin: auto;</p>

<div class="center">
  <p><b>Note: </b>Using margin:auto will not work in IE8, unless a !DOCTYPE is declared.</p>
</div>

</body>
</html>

Code Example 4

.center
{

  margin: auto;

   
width: 50%;

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

}

Code Example 5

.parent-class {
  display: flex;
  align-items: center;
  justify-content: space-around;
}

Code Example 6

<div id="outer">
  <div id="inner">Foo foo</div>
</div>
//css:, demo with border
<style>
#inner {
  display: table;
  margin: 0 auto;
  border: 1px solid black;
}

#outer {
  border: 1px solid red;
  width:100%
}
</style>

Learn ReactJs, React Native from akashmittal.com