css center horizontally and vertically

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

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

1/* No Flexbox */
2.parent {
3  position: relative;
4}
5.child {
6  position: absolute;
7  top: 50%;
8  transform: translateY(-50%);
9}
10
11/* With Flexbox */
12
13.parent {
14  display: flex;
15  flex-direction: column;
16  justify-content: center;
17}
18
19
20

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>