css center div

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

1.centered {
2  position: fixed;
3  top: 50%;
4  left: 50%;
5  /* bring your own prefixes */
6  transform: translate(-50%, -50%);
7}

1.center {
2    position: fixed;
3    top: 50%;
4    left: 50%;
5    transform: translate(-50%, -50%);
6}

1.MyDiv{
2  	display: block;
3  	margin-left: auto;
4	margin-right: auto;
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>

1.my-div{
2  width: 80%;
3  margin: 10px auto;
4  /*
5    margin-left and right right has 'auto' value
6    meaning that the browser will automatically calculate the remaining space
7    and give it to the margin.
8    From the example. 20% remained from 80%
9    so that our div will have 
10    margin-right: 10%
11    margin-left: 10%
12    and it will be centered.
13  */
14}