different ways to center a div

1.container {
2  display: flex;
3  justify-content: center;
4  align-items: center;
5}

1/* Centering an element without flexbox */
2.parent-element {
3  position: relative;
4}
5
6.child-element {
7	position: absolute;
8  	left: 50%;
9  	top: 50%;
10  	transform: translate(-50%, -50%);
11}
12
13/* Centering an element using flexbox */
14.parent-element {
15	display: flex;
16  	align-items: center;
17  	justify-content: center;
18}

1.container {
2  ...
3  display: flex;
4  justify-content: center;
5}

1<!-- 
2	 Simple CSS CENTER DIV Example
3 	 
4	 * See Fiddle in link for PoC *
5-->
6
7<div class="parent">
8  <div class="child">
9    <p>
10      Eh Up Me Duck!
11    </p>
12  </div>
13</div>
14
15<style>
16.parent {
17  /* Just for aesthetics: see fiddle */
18  border: 1px solid black;
19  padding: 2px;
20}
21
22.child {
23  border: 1px solid red;
24  width: 50%;
25  
26  /* This is where the magic happens */
27  margin-left: auto;
28  margin-right: auto;
29  /**********************************/
30}
31
32p {
33  /* As you do */
34  text-align: center;
35}
36</style>

1margin:auto