I've been struggling to center items both vertically and horizontally within a div. Despite searching on various platforms, I haven't been able to find a working solution. My goal is to have each item perfectly centered in its respective div, whether it's one of the two navigation tiles on the left or the four on the right (each contained within its own div). These divs also have parent divs that contribute to a sticky footer. The main challenge here is ensuring responsiveness without relying on fixed pixels.
.absolute-center {
position: relative;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
I attempted the above code to center the content, but unfortunately, it didn't work as expected. Here's the fiddle for reference: https://jsfiddle.net/jmc3t164/
Any assistance would be greatly appreciated!