Vertically center ul in div

Question

This is what my code looks like.

#container {
  width: 584px;
  height: 50px;
  position: relative;
  overflow: hidden;
}

#container ul {
  position: absolute;
  margin: 0;
  padding: 0;
  width: 3504px;
}

#container ul li {
  width: 584px;
  float: left;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

<div id="container">
   <ul>
      <li>...</li>
      <li>...</li>
      <li>...</li>
   </ul>
</div>

As the title says, I want to center the ul vertically inside the div. I cannot change the above CSS rules because. I've been googling solutions and trying to find a way, but everything seems to collide with the rules I already have.

Any idea how to do this?

Would it help if instead of the #container div I used a table with one row and column?

With absolute positioning you can only do that if you know the element height beforehand (or measure it with JavaScript). — CBroe, Apr 18 '13 at 09:14
possible duplicate of [Using margin:auto to vertically align div](http://stackoverflow.com/questions/12415661/using-marginauto-to-vertically-align-div) — Oleg, Apr 18 '13 at 09:54

score 9 · Answer 1 · edited May 23 '17 at 11:54

9

Please use the search function in the future. The full answer is explained here; this is the code for your scenario:

.container {
  display: table;
  height: 100%;
  position: absolute;
  overflow: hidden;
  width: 100%;}
.helper {
  #position: absolute; /*a variation of an "lte ie7" hack*/
  #top: 50%;
  display: table-cell;
  vertical-align: middle;}
ul{
  #position: relative;
  #top: -50%;
  margin:0 auto;
  width:200px;}

The three elements have to be nested like so:

<div class="container">
  <div class="helper">
    <ul><!--stuff--></ul>
  </div>
</div>

http://jsfiddle.net/ovfiddle/yVAW9/

edited May 23 '17 at 11:54

Community

1
1

answered Apr 18 '13 at 09:54

Oleg

24,465
8
61
91

8

Don't you think I already searched for an answer? Your way does not work. – Banana Apr 18 '13 at 10:12
@Banana i know this is an old question but what browser were you using? – THE AMAZING Aug 25 '15 at 18:52
After lots of research, I have determined this method works on Opera, IE8+, Firefox, Chrome, and safari. – THE AMAZING Aug 25 '15 at 21:03

score 3 · Answer 2 · answered Apr 18 '13 at 09:50

"Centring" a div or other containers vertically is quite tricky in CSS, here are your options.

You know the height of your container

If you know the height of the container, you can do the following:

#container {
    position: absolute;
    top: 50%;
    margin-top: -half_of_container_height_here;
}

So we essentially place in the middle and then offset it using a negative margin equal to the half of the height. You parent container needs to have position: relative.

You don't know the exact height of your container

In this case you need to use JavaScript and calculate the appropriate margins (unfortunately you cannot use margin-top: auto or something similar).

More info here.

I've tried my best to cover the reason why `margin-top` cannot be `auto` [here](http://stackoverflow.com/a/12417336/1081234) - as well as more elegant ways of centering content vertically than using absolute positioning :) — Oleg, Apr 18 '13 at 09:58

score 3 · Answer 3 · answered Sep 11 '19 at 09:41

You can use flex to make your ul center vertical, horizontal or both like

.container{
  background:#f00;
  height:150px;
  display:flex;
  align-items:center;
  /*justify-content:center;=>will make ul center horizontal*/
}
.container ul{
  background:#00f;
}

<div class="container">
  <ul>
    <li>A</li>
    <li>B</li>
    <li>C</li>
  </ul>
</div>

score 0 · Answer 4 · answered Apr 18 '13 at 09:23

0

If you can add jQuery library you could try this,

$(document).ready(function(){

    // Remove li float
    $("#container ul li").css("float", "none");

    // Get the full height of the UL
    var ulheight = $("#container ul li")[0].scrollHeight;

    // Based on the height of the container being 50px you can position the UL accordingly
    var pushdown = (50-ulheight)/2;
    $("#container ul li").css("top", pushdown);

});

answered Apr 18 '13 at 09:23

Rob

738
3
10
23

For the sake of troubleshooting. I'd try and get the bare bones solution working first before adding anything else which could affect positioning. Since it was said that CSS can't be modified then you could remove it via jQuery. – Rob Apr 18 '13 at 09:30
I meant that I needed the CSS for other reasons, not that it is virtually impossible to remove it :D – Banana Apr 18 '13 at 09:40
-1, avoid using javascript for styling whenever possible - especially when this can be accomplished with css, this is good practice to avoid the so-called "flash of unstyled content" – Oleg Apr 18 '13 at 09:55
Yeah, maybe, but this is the only thing that's actually doing what I need. – Banana Apr 18 '13 at 10:12
I know what you mean about the flash of unstyled content but ultimately I think it depends where the content is. jQuery has CSS functionality built in for lots of reasons, like you say don't use javascript "whenever possible", but in this instance perhaps it's what is needed. And this solution appears to be working. – Rob Apr 18 '13 at 10:56

score 0 · Answer 5 · answered Aug 28 '16 at 21:57

0

Now you can make the parent container display:flex and align-items:center. That should work. Although flexbox properties are not supported by older browsers.

answered Aug 28 '16 at 21:57

Sebastian Cruz

65
7

Vertically center ul in div

5 Answers5

Linked

Related