-1

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!

Brady
  • 1
  • 1
  • possible duplicate of [How to center an element horizontally and vertically?](http://stackoverflow.com/questions/19461521/how-to-center-an-element-horizontally-and-vertically) – baao Jul 25 '15 at 22:17
  • I've tried those answers and can't get them to work – Brady Jul 25 '15 at 22:20

2 Answers2

0

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

Paulie_D
  • 107,962
  • 13
  • 142
  • 161
-1
<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.

Michael Kasd
  • 1
  • 2