center div horizontally

1.parent {
2  position: relative;
3}
4.child {
5  position: absolute;
6  top: 50%;
7  left: 50%;
8  transform: translate(-50%, -50%);
9}

1/* margin auto does the magic, make sure to provide width less than 100% */
2.center {
3	margin: auto;
4    width: 400px;
5}
6
7.center {
8	margin: auto;
9    width: 50%;
10}
11

1.container{	
2	margin: 0;
3    position: absolute;
4    top: 50%;
5    left: 50%;
6    -ms-transform: translate(-50%, -50%);
7    transform: translate(-50%, -50%);
8  	width: /* Define the width here; */
9    height: /* Define the height here; */
10}
11
12/*You have to define the width and height! */

1// example 1 
2div { display: grid; place-items: center; }
3
4// example 3
5div{ display:flex; align-items:center; }
6
7// example 3
8div { width: 100%; margin: 0 auto; }

1#inner {
2  width: 50%;
3  margin: 0 auto;
4}

1text-align: center; /*also works for images or anything inside the object (I think)*/