Absolute Centering Items Within A Div - html

Question

I am trying to center items (vertically and horizontally) within a div. I have looked around here and other places and can't seem to get anything to work. What I am looking for is to have each item centered both vertically and horizontally in its respective div. Notice that there are two navigation tiles on the left and 4 on the right (1 div per tile). The divs also have parent divs which I used to build the sticky footer. The challenge is that it needs to be responsive so I cannot used fixed pixels.
.absolute-center {
position: relative;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
The above is what I tried to get the content centered. Its not working unfortunately.
Here's the fiddle: https://jsfiddle.net/jmc3t164/
Any help is greatly appreciated!

Answer 1

You have this structure (shortened for brevity)
<div class='top-half'>
<p class='absolute-center'>Time left to order</p>
</div>
<div class='bottom-half'>
<p class='absolute-center'>Add Produce</p>
</div>
Centering both vertically and horizontally is often acheieved by
.absolute-center {
position: absolute; /* note */
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
BUT this requires that the parent element (in which the child will be centered) has position:relative.
So, you need to add that
.top-half {
width: 100%;
height: 50%;
position: relative;
}
.bottom-half {
width: 100%;
height: 50%;
position:relative;
}
JSFiddle Demo

Answer 2

<div id="blahblah" style="width:90%;margin:auto 5%"> content </div><br> blahblah can be any id you want, or not necessary.<br> You definitely need a width of something, ideally less than 100%; and divide the remainder from 100 by 2 and set it as margin. ( margin: auto is for up and down margings, the 5%, or whatever is for left / right.
Another way is to have a class .center{text-align:center} and assign it to your Div.
Finally, yet another is to insert a div under your position relevant div and style it with 'text-align:center.